web字體規範

前言

對於設計稿的解析中，確定是有些設計稿有特殊的字體，而這些字體可能只有設計師纔有，或者只有前端拓展了系統字庫才能顯示器正確效果。但對於前端頁面的終極使用者，他們可能系統沒有這些字體，那麼對於這些特殊字體究竟該如何處理？ 本文經過與設計，產品，前端的統一溝通，達成共識以下。請各個前端 按照這個原則去對應的解析實現設計ui效果。

界限劃定

首先咱們的前提是針對常規正文，大篇幅文本的字體，而非標題、活動頁、特效頁的部分特殊字。對於前者咱們是用css代碼限定font-family,或者webfont解決實現;對於後者經過切圖實現。 其中特別說明：Open Sans 的中文字體在 Mac 上效果不錯，微軟雅黑的中文字體在 Windows 上效果不錯。

一 解決方案–具體規範

自帶字體（推薦）

用戶系統中自帶的字體，不須要任何特殊支持的，這類也被成爲web安全字體。這部分設計師能夠大膽去採用，可是一個項目中的正文也是建議控制在一種常規字體，建議body裏定義默認正文字體列表，而不是每一個部分都須要單獨查看字體定義字體。css約定了五種都會支持的字體，另外不一樣系統也會支持不一樣的字體，彙總以下表格。

字體種類	字體列表
css約定字體（英文字體）	（5類非五個）serif」、」sans-serif」、」cursive」、」fantasy」、」monospace」
windows自帶中文字體	黑體，宋體，新宋體，仿宋，楷體，微軟雅黑體
mac自帶中文字體	華文細黑，黑體-簡，蘋方-簡

注意事項：特別的針對font-family說明下，font-family屬性是多種字體的名稱，做爲一個」應變」制度，以確保瀏覽器/操做系統之間的最大兼容性。若是瀏覽器不支持的第一個字體，它嘗試下一個的字體。你想要的字體類型若是瀏覽器找不到，它會從通用的字體類型中找到與你類似的.代碼語法以下： body{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;}

@font-face實現webfont（不推薦）

1. @font-face 介紹 @font-face是css中的一個功能模塊，用於實現網頁字體多樣性(設計者可隨意指定字體，不須要考慮瀏覽者電腦上是否安裝)。主要是把本身定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，咱們在Web的開發中使用字體不怕只能使用Web安全字體。語法具體兼容見下圖（數據統計來自於can i use）：Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 規則.可是, Internet Explorer 9 只支持 .eot 類型的字體, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體.注意： Internet Explorer 8 及更早IE版本不支持@font-face 規則.

1. @font-face文件 因爲網頁中使用的字體類型，也是各瀏覽器對字體類型有不一樣的支持規格。 字體格式類型主要有幾個大分類：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。 TrueType（.ttf）：Windows和Mac系統最經常使用的字體格式，其最大的特色就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體同樣能夠隨意縮放、旋轉而沒必要擔憂會出現鋸齒。 Embedded Open Type(.eot)：EOT是嵌入式字體，是微軟開發的技術。容許OpenType字體用@font-face嵌入到網頁並下載至瀏覽器渲染，存儲在臨時安裝文件夾下。 OpenType(.otf)：OpenType是微軟和Adobe共同開發的字體，微軟的IE瀏覽器所有采用這種字體。致力於替代TrueType字體。 WOFF–WebOpen Font Format (.woff)：WOFF（Web開發字體格式）是一種專門爲了Web而設計的字體格式標準，其實是對於TrueType/OpenType等字體格式的封裝，每一個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便於網絡傳輸。 SVG：SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術來呈現字體，還有一種gzip壓縮格式的SVG字體。
2. 補充瀏覽器對字體文件的支持狀況 瀏覽器 支持類型 IE6,7,8 僅支持 Embedded OpenType(.eot) 格式 Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式 Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式 Chrome,Safari,Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式
3. 字體文件：找到系統中的字體文件，提供給前端，最好是ttf格式的。通常路徑以下：C:\Windows\Fonts；mac系統下字體路徑/System/Library/Fonts。 根據.ttf能夠生成另外幾種格式，推薦轉換站點：http://www.font2web.com/， 轉換以後會生成一個壓縮包，包括了上面的幾種格式。
4. 前端的語法 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ } //京東的自定義字體： @font-face { font-family: iconfont; src: url(//misc.360buyimg.com/mtd/pc/index/gb/images/iconfont.eot); src: url(//misc.360buyimg.com/mtd/pc/index/gb/images/iconfont.eot#iefix) format('embedded-opentype'),url(//misc.360buyimg.com/mtd/pc/index/gb/images/iconfont.woff) format('woff'),url(//misc.360buyimg.com/mtd/pc/index/gb/images/iconfont.ttf) format('truetype'),url(//misc.360buyimg.com/mtd/pc/index/gb/images/iconfont.svg#iconfont) format('svg') }

二 其餘站點信息採集

• 爲了更好的理解這方面，咱們採集瞭如下項目的字體規定狀況（無一例外，正文字體都是繼承來自body定義的font-family）.

站點	字體列表
百度pc	arial,」Hiragino Sans GB」,」Microsoft Yahei」,」微軟雅黑」,」宋體」,Tahoma,Arial,Helvetica,STHeiti
百度手機	Arial,Helvetica,sans-serif
天貓手機	Helvetica,sans-serif
天貓pc	tahoma, arial, 宋體
京東pc	Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\5b8b\4f53,sans-serif
京東手機	Microsoft YaHei」,Arial,Helvetica,sans-serif
蘑菇街pc	tahoma,arial,sans-serif
蘑菇街手機	Arial
微信	-apple-system-font,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif
知乎	‘Helvetica Neue’,Helvetica,’PingFang SC’,’Hiragino Sans GB’,’Microsoft YaHei’,Arial,sans-serif

• 綜上最終推薦參考字體： pc端： 「Microsoft Yahei」,」微軟雅黑」,」宋體」,Tahoma,Arial,Helvetica,STHeiti 手機端：Arial,Helvetica,sans-serif

三 參考文檔

本文檔參考w3c，菜鳥教程，知乎回帖，csdn博客等文檔。

四 其餘

• 版權問題，設計以及其餘相關部門可使用的字體以下,避免沒必要要的版權問題。（參考設計梳理）

1. 系統內置字體，windows、mac系統下的內置的字體，
2. 開源字體：思源黑體，文鼎開放黑體等
3. 可免費商用的字體，站酷高端黑、站酷快樂體、方正黑體等。
4. 已購買版權的字體：方正正黑簡體、方正正大黑簡體、方正尚酷簡體