原文出處：https://www.cnblogs.com/Coding-net/p/5629680.html

首先來看一則設計師和前端小白的日常,這是使用 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

為嘛有這麼多格式呢，當然是各家瀏覽器幹得好事了@[email protected], 大家可以到 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 等，也是不錯的。

（完）