Web 字體的選擇和運用

首先來看一則設計師和前端小白的日常,這是使用 Mac OS 的設計師給的效果圖

這是使用 Windows 開發的實際產品頁面

我跟你們說，設定字體要按照基本法！

(PS: 以上截圖不代表網站真實面貌，僅為說明。)

先來看看字體和字族的關系

真的是一圖勝千言啊！沒看明白的話再來一張圖！

這張圖里的 Helvetica Neue Ultra Light 算是一個字體，而所列的這些字體都算是 Helvetica Neue 字族的字體。

一個字族需要滿足指定字符集 Unicode Table

這張 unicode 表分成了很多的 block，把某一類字符放在指定的 block 中，如下圖

西文字體比如 Helvetica 等，一定會完成拉丁文對應的 block 中的字形，但是他們是不會去做 CJK（中日韓） 的字形。而特殊字符，比如表情符號等，也是有預留位置的，這也是為啥我們經常發現別人發過來的一些東西是方塊，因為對方發送的字符在我們自己的機器上並沒有相應的字體來顯示。

不同系統上字體的差別

這個就是大部分時候導致設計師效果圖和開發結果不一致的主要原因，設計師用着 Mac 上獨有的字體設計頁面，然后測試和產品經理最終只在 windows 上查看頁面效果，自然就跟設計師效果圖不一致了。

Mac OS X 字體列表
, Windows 字體列表
, 開源字體列表

合法合理使用字體

不管我們日常用計算機或者手機，閱讀的最多就是文字，而字體在這些設備上對於我們來說就像是空氣和水般的存在，但制作字體的過程並不輕松，尤其是中文字體，幾萬個字形不是幾十個拉丁字形所能相比的，往往需要字形設計師和工程師配合耗時幾年的時間來做，成本可想而知，所以商業公司字體的售價一般都比較貴，不過很多字體公司都提供個人非商用的免費版本的字體。

如果設計師喜歡一款蘋果的字體，但是 windows 上沒有怎么辦？直接做成圖片嵌入到網頁里？

No！雖然字體在自己的機器上可以免費使用（那是因為蘋果買的字體，你又買了蘋果的機器，其實你是買過單的，而不是吃霸王餐），但是如果商業產品里做成圖片給用戶看的話那就涉及到字體的知識產權，你需要另外購買，即使這款字體在你的計算機和手機上已經有了。

方案一：使用相似字體作為替代方案，這個方案需要設計師對字體以及各個系統上的字體比較了解，當然啦，現成工具是有噠！當當當當：請在 PC 上戳這里，這個網站提供了 Mac 和 Windows 上相似字體的替代方案。

不好意思，我是處女座！我要的不是相似，我要是 100% 相同！

好吧，其實，還有方案二：使用 Web Font 技術。不過依然還是要注意字體的知識產權問題，是付費使用商業字體還是免費的開源字體都任君挑選，但請不要隨意使用商業字體，免得找上門的麻煩。

資源推薦

www.typeisbeautiful.com

《西文字體》

《西文字體2》

《平面設計中的網格系統：平面設計、字體編排和空間設計的視覺傳達設計手冊》

---- 華麗的分割線 (以下為純技術內容，設計師和產品經理可以跳出了)----

CSS 中的字體分類和 Fallback 機制

字體的分類有很多種，可以參考這個 Wiki Typeface

不過計算機上其實並沒有把種類分得那么細致，在 CSS 中有5個基本款

serif, sans-serif, monospace, cursive, fantasy.

serif 襯線字體，如 Big Caslon, 宋體

sans-serif 非襯線字體，如 Helvetica, 黑體

monospace 等寬字體，如 Menlo

cursive 手寫體，如 Comic Sans MS

fantasy 幻想體，如 Bodoni Ornaments

接下來我們來看一看 CSS 中字體的 Fallback 機制：

font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;

這段 CSS 代碼中的字體的 Fallback 可以看下圖。

這個 fallback 的規則可以總結為

(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'

就這樣一直找匹配的字體，直到系統默認，所以一般都把系統默認的5類字體放到 font-family 定義的最后來寫。

那么一個國際化的站點應該如何設置多語種的字體呢？其先后順序如何設定？這里強烈推薦 Airbnb 作為參考。

[lang="ja"] body{
 font-family:"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","MS Gothic”,  "ＭＳ ゴシック","Helvetica Neue”,Helvetica,Arial,  sans-serif !important } [lang="ko"] body{  font-family:"나눔 고딕","Nanum Gothic","맑은 고딕","Malgun Gothic”,  "Apple Gothic","돋움",Dotum,"Helvetica Neue”,Helvetica,  Arial,sans-serif !important } [lang^="zh"] body{  font-family:"Hiragino Sans GB”,"華文細黑","STHeiti","微軟雅黑",  "Microsoft YaHei",SimHei,"Helvetica Neue”,Helvetica,Arial,  sans-serif !important } 

使用 Web Font

Web Font 技術的出現使得用戶不安裝網頁指定的字體也可以獲得同樣的顯示效果成為可能。

WebFont 技術支持的常見文件格式有以下幾種：

EOT, TTF/OTF, WOFF, WOFF2, SVG

為嘛有這么多格式呢，當然是各家瀏覽器干得好事了@_@, 大家可以到 caniuse.com 上去查各個格式的兼容情況。

好了，既然知道兼容情況了，那么就比較好理解 web font 的 css 的通用寫法了

// Syntax
@font-face {
 font-family: <font-name>;  src: <local/url> <format>,[…];  font-weight: <font-weight>;  font-style: <font-style>;  font-stretch: <font-stretch>;  unicode-range:<unicode-range>; } // Examples @font-face {  font-family:’Helvetica’;  src: url(fonts/Helvetica-Regular.eot?#iefix) format(‘eot’),  url(fonts/Helvetica-Regular.woff2) format(‘woff2’),  url(fonts/Helvetica-Regular.woff) format(‘woff’),  url(fonts/Helvetica-Regular.ttf) format(‘truetype’);  font-weight: 400; } @font-face {  font-family:’Helvetica’;  src: url(fonts/Helvetica-Bd.eot?#iefix) format(‘eot’),  url(fonts/Helvetica-Bd.woff2) format(‘woff2’),  url(fonts/Helvetica-Bd.woff) format(‘woff’),  url(fonts/Helvetica-Bd.ttf) format(‘truetype’);  font-weight: 700; } .text {  font-family: 'Helvetica'; } .text .text-normal {  font-weight: 400; } .text .text-bold {  font-weight: 700; } 

咦，svg 格式上哪兒去了呀？svg font 的問題在於文件體積很大，有時甚至超過原始的 TTF/OTF 字體文件。Chrome 從 38 開始就不支持 svg font 了，目前主流瀏覽器還支持 svg font 的就只有 iOS Safari(9.3), Blackberry Browser(10), Opera Mobile(37) 和 UC Broswer for Android(9.9) 了。但是這些瀏覽器都支持文件體積更小的 WOFF 格式的 web font。所以不做 svg 文件完全沒有問題，WOFF 足以勝任。

為什么 src 中的第一個 url 看起來如此奇怪，有個? 呢? 那就是 IE8 的問題了，此君文化水平較差，不認識 format 這位先生，所以就只能使用 hack 技巧把文件名之后的文字都變為url的參數讓笨笨的 IE8 直接忽略就好了。至於 #iefix 加不加就看客官你的喜好了。恩，話說這個笨笨的 IE8 還有一個缺陷就是相同 font-family 的@font-face 定義最多只能識別 4 個，也就是說如果你有 4 種以上字重對應同一個 font-family 的情況的話，請你給剩下的字重起另外一個 font-family 名字吧。。。

說了這么多，這幾種格式的文件要怎么生成呢？首先你得有字體的 TTF 或者 OTF 文件，簡而言之，你必須先擁有目標字體可以安裝在計算機上的這種格式的文件，然后使用 fontmin 來生成 EOT, WOFF 格式的文件，使用 ttf2woff2 來生成 WOFF2 格式的文件。這樣文件格式就齊全啦。

但是，你是不是覺得太繁瑣了？啊，好吧，你可以用谷歌的字體服務，什么？連不上呀 T_T，要不嘗試一下 360 的字體庫吧，哎呀？偶爾也有問題？佛曰，繁瑣的也許靠譜，容易的也許不穩定，施主請自便。

Web Font 的問題與優化

字體文件的加載需要時間，各個瀏覽器對於字體加載渲染的過程也不同。

Safari 不會渲染文字直到 webfont 加載完畢.

Chrome and Firefox 會等待 webfont 加載，如果 3 秒鍾以內不能完成，那么會使用備用字體渲染文字，在webfont 加載完成之后重新渲染文字。

IE 會立即使用備用字體渲染文字，當 webfont 加載完成之后重新渲染文字。

為了保證良好一致的用戶體驗，我們需要統一這個行為模式。你需要 webfontloader, 除了提供常用的第三方字體加載方式之外，最主要的功能是可以判斷字體加載的各個階段並賦予相應的 CSS 類來控制目標內容的樣式。

html.wf-loading {
 visibility: hidden; } html.wf-active, html.wf-inactive {  visibility: visible; } 

上面這段代碼很容易閱讀，即在字體加載時隱藏 html 內容，加載完成或失敗時顯示。

參考：Google Webfont optimization

加載和渲染問題解決了，那么中文字怎么辦？網站也不會把幾萬個中文字符都用到，我們只需要顯示其中的一小部分字而已，需要下載動則好幾 MB 大小的中文字體么？

鐺鐺鐺鐺，輪到 Font Spider 登場了，字蛛俠可以幫助我們只把需要的中文字符做成 webfont 文件，解決了令人頭大的文件大小問題。

當然了，你也可以使用一些在線的 subset 服務，例如 typesquare 等，也是不錯的。

（完）

你可能會感興趣的文章：

• 《使用原理視角看 Git 》https://blog.coding.net/blog/principle-of-Git
• 《如何部署軟件 - 讓你團隊的部署像地獄一樣無聊且毫無壓力》https://blog.coding.net/blog/deploying-software
• 《使用 Feature Branch Workflow 讓開發更簡單》https://blog.coding.net/blog/feature-branch-workflow
• 其他技術博文 https://blog.coding.net/technology/blogs