[TOC] ## 前言 對于設計稿的解析中，肯定是有些設計稿有特殊的字體，而這些字體可能只有設計師才有，或者只有前端拓展了系統字庫才能顯示器正確效果。但對于前端頁面的終極使用者，他們可能系統沒有這些字體，那么對于這些特殊字體究竟該如何處理？ 本文通過與設計，產品，前端的統一溝通，達成共識如下。請各個前端 按照這個原則去對應的解析實現設計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 規則.  2. @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字體。 3. 補充瀏覽器對字體文件的支持情況 | 瀏覽器 | 支持類型 | | --- | --- | | 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) 格式 | 1. 字體文件：找到系統中的字體文件，提供給前端，最好是ttf格式的。一般路徑如下：`C:\Windows\Fonts`；mac系統下字體路徑`/System/Library/Fonts`。 根據.ttf可以生成另外幾種格式，推薦轉換站點：http://www.font2web.com/， 轉換之后會生成一個壓縮包，包括了上面的幾種格式。 3. 前端的語法 ~~~ @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. 已購買版權的字體：方正正黑簡體、方正正大黑簡體、方正尚酷簡體