日常前端開(kāi)發(fā)中，少不了與字體打交道。一般小網(wǎng)站的開(kāi)發(fā)中只需要使用系統(tǒng)默認(rèn)字體即可，但需要制作特殊效果的網(wǎng)站避免不了第三方字體的引入！
系統(tǒng)默認(rèn)字體如何使用
1.? ? web-safe字體
不同設(shè)備的系統(tǒng)默認(rèn)字體是不相同的，不同系統(tǒng)之間的字體更是不同，比如Mac、windows，他們各自的系統(tǒng)字體不相同，但是有幾種字體是他們共同支持的：
web安全字體有20種左右，網(wǎng)上到處都是這類(lèi)總結(jié)，點(diǎn)擊此處查看web安全字體。
2.? ? 前端字體兼容寫(xiě)法
原文鏈接：http://caibaojian.com/css-font.html
字體的分類(lèi)有很多種，可以參考這個(gè) WikiTypeface·
不過(guò)計(jì)算機(jī)上其實(shí)并沒(méi)有把種類(lèi)分得那么細(xì)致，在 CSS 中有5個(gè)基本款
serif, sans-serif, monospace, cursive, fantasy.
serif 襯線字體，如 Big Caslon, 宋體
sans-serif 非襯線字體，如 Helvetica, 黑體
monospace 等寬字體，如 Menlo
cursive 手寫(xiě)體，如 Comic Sans MS
fantasy 幻想體，如 Bodoni Ornaments
接下來(lái)我們來(lái)看一看 CSS 中字體的 Fallback 機(jī)制：
font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;
這段 CSS 代碼中的字體的 Fallback 可以看下圖。
這個(gè) fallback 的規(guī)則可以總結(jié)為：
(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'
就這樣一直找匹配的字體，直到系統(tǒng)默認(rèn)，所以一般都把系統(tǒng)默認(rèn)的5類(lèi)字體放到 font-family 定義的最后來(lái)寫(xiě)。
那么一個(gè)國(guó)際化的站點(diǎn)應(yīng)該如何設(shè)置多語(yǔ)種的字體呢？其先后順序如何設(shè)定？這里強(qiáng)烈推薦?Airbnb?作為參考
[lang^="zh"] body{font-family:"Hiragino Sans GB”,"華文細(xì)黑","STHeiti","微軟雅黑", "Microsoft YaHei",SimHei,"Helvetica Neue”,Helvetica,Arial, sans-serif !important }
作為一個(gè)?web?開(kāi)發(fā)者，你理應(yīng)對(duì) Windows, Mac OS,?Linux?家族等常用操作系統(tǒng)里的系統(tǒng)字體有足夠的了解，特別是中文。在這里，我們假設(shè)目標(biāo)網(wǎng)站要同時(shí)給予 windows 用戶和 mac 用戶最好的字體體驗(yàn)，于是我們可以這樣聲明：
Font-family: Helvetica, Tahoma, Arial, STXihei, “華文細(xì)黑”, “Microsoft YaHei”, “微軟雅黑”, sans-serif
這句聲明都做到哪些事情呢？讓我們一一說(shuō)明（括號(hào)內(nèi)代表其對(duì)應(yīng)的目標(biāo)操作系統(tǒng)）：·
對(duì)于英文字符，首先查找Helvetica(Mac)，然后查找Tahoma(Win)，都找不到就用Arial(Mac&Win)；若是以上三者都缺失，則使用當(dāng)前默認(rèn)的sans-serif字體(操作系統(tǒng)或?yàn)g覽器指定)；
對(duì)于中文字體，我們已經(jīng)了解其規(guī)則了。華文細(xì)黑(Mac)，微軟雅黑(Win)是這兩個(gè)平臺(tái)的默認(rèn)中文字體。
第三方字體如何引入
@font-face用來(lái)引入設(shè)計(jì)師喜歡的任意字體，引入字體后字體文件存放在web服務(wù)器上，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。
語(yǔ)法：
由于各個(gè)瀏覽器對(duì)'@font-face'規(guī)則支持的字體格式不同，所以需要考慮其兼容性。各個(gè)瀏覽器支持的字體格式如下：
Webkit/Safari(3.2+)?
TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；
Opera (10+)?
TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；
Internet Explorer?
自ie4開(kāi)始，支持EOT格式的字體文件；ie9支持WOFF；
Firefox(3.5+)?
TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
Google Chrome?
TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有瀏覽器的完美支持
兼容性寫(xiě)法如下：
