頭疼事兒
字體一直都是前端工程師很頭疼的問題，如果參與過產(chǎn)品的設(shè)計(jì)和開發(fā)，會(huì)經(jīng)常遇到這樣的問題：
1、對(duì)比高保真和實(shí)現(xiàn)出來的網(wǎng)頁，其他地方都很好的實(shí)現(xiàn)了，就字體最不給力
2、在Mac上很好看，在window上丑死，iPhone，andrord又不同
為什么會(huì)這樣？
說到底，其幕后黑手就是系統(tǒng)。瀏覽器使用哪種字體，取決于你的系統(tǒng)安裝了哪些字體（瀏覽器自身不帶字體）或者工程師有沒有讓用戶安裝了某種字體
合法的使用
中文字體，幾萬個(gè)字形，往往需要字形設(shè)計(jì)師和工程師配合耗時(shí)幾年的時(shí)間來做，成本可想而知，所以商業(yè)公司字體的售價(jià)一般都比較貴，不過很多字體公司都提供個(gè)人非商用的免費(fèi)版本的字體（注意是個(gè)人非商業(yè)）。那
如果設(shè)計(jì)師在網(wǎng)站上運(yùn)用了一款蘋果的字體，window上沒有這款字體，前端工程師怎么破？
1、直接做成圖片嵌入到網(wǎng)頁里？
No。這種做法我本人是有這樣偷懶過的，既方便又省錢。但是我錯(cuò)了。
雖然字體在自己的機(jī)器上可以免費(fèi)使用（那是因?yàn)樘O果買的字體，你又買了蘋果的機(jī)器，其實(shí)你是買過單的，而不是吃霸王餐），但是如果商業(yè)產(chǎn)品里做成圖片給用戶看的話那就涉及到字體的知識(shí)產(chǎn)權(quán)，你需要另外購買，即使這款字體在你的計(jì)算機(jī)和手機(jī)上已經(jīng)有了。
可見，還是不可取的
2、使用相似字體作為替代
這個(gè)方案需要設(shè)計(jì)師和前端工程師對(duì)字體以及各個(gè)系統(tǒng)上的字體比較了解，有個(gè)網(wǎng)站很不錯(cuò)，提供了Mac和window上相似字體的替代方案，可以戳一戳它！戳我戳我
3、使用Web Font 技術(shù)。
這個(gè)說辭是說給設(shè)計(jì)師聽的，對(duì)于前端工程師來說，就是使用css3的@font-face。這個(gè)，個(gè)人建議自家設(shè)計(jì)師自己設(shè)計(jì)（避免了很多麻煩），當(dāng)然可以使用第三方的，比如阿里巴巴，不過依然還是要注意字體的知識(shí)產(chǎn)權(quán)問題。如果您還不是很清楚開源、商用怎么區(qū)分，可以狠狠的點(diǎn)擊一下：關(guān)于GPL協(xié)議的理解(開源與商用、免費(fèi)與收費(fèi))
合理的使用
1、css中字體的分類
字體的分類有很多種，可以參考這個(gè) Wiki Typeface
不過計(jì)算機(jī)上就基本五大款：css:fonts
- serif 襯線字體，如 Big Caslon, 宋體
- sans-serif 非襯線字體，如 Helvetica, 黑體
- monospace 等寬字體，如 Menlo
- cursive 手寫體，如 Comic Sans MS
- fantasy 幻想體，如 Bodoni Ornamen
2、CSS 中字體的 Fallback 機(jī)制
什么是Fallback 機(jī)制？給個(gè)圖文說明，一看就懂
font-family: 'Helvetica Neue', 'Helvetica', 'Microsoft Yahei', sans-serif;
這個(gè) fallback 的規(guī)則可以總結(jié)為
(hasFont && isInUnicodeTable) ? 'Current Font' : 'Next Font'
就這樣一直找匹配的字體，直到系統(tǒng)默認(rèn)，所以一般都把系統(tǒng)默認(rèn)的5類字體放到 font-family 定義的最后來寫
那么，其先后順序如何設(shè)定？沒有統(tǒng)一的答案，但可以借鑒下面的站點(diǎn)：
國(guó)際化站點(diǎn)： Airbnb
國(guó)內(nèi)站點(diǎn)：簡(jiǎn)書 、bootstrap
更多以后補(bǔ)充
web font 使用
Web Font 技術(shù)的出現(xiàn)使得用戶不安裝網(wǎng)頁指定的字體也可以獲得同樣的顯示效果成為可能。
1、兼容性
WebFont 技術(shù)支持的常見文件格式有以下幾種：
EOT, TTF/OTF, WOFF, WOFF2, SVG
別問我為什么這么多格式，各家瀏覽器干的好事，想知道各個(gè)格式的兼容問題，可以戳一下?? caniuse.com
2、css通用寫法
好了，了解了兼容性問題，那下面的通用寫法一看就懂了
@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>;
}
.text { font-family: '<font-name>';}
3、轉(zhuǎn)webfont
我想，如果還沒入手的同學(xué)看到這，就蒙逼了，去哪獲取到這么多的格式，用什么去獲取？
- 情景1 ：你手頭上有碼（設(shè)計(jì)師提供了svg格式的圖標(biāo)給你了），將svg圖標(biāo)轉(zhuǎn)為web font字體
狠狠的點(diǎn)擊IconMoon App
只需要三步基本就搞定，這已經(jīng)不是技術(shù)問題了，那就不多說了
- 情景2 ：只需把部分中文字符做成 webfont 文件，要求文件大小小小小
鐺鐺鐺鐺，只要戳我 Font Spider 就能幫你解決了令人頭大的文件大小問題
4、webfont 問題與優(yōu)化
- 問題：
字體文件的加載需要時(shí)間，各個(gè)瀏覽器對(duì)于字體加載渲染的過程也不同 - 解決：
為了保證良好一致的用戶體驗(yàn)，我們需要統(tǒng)一這個(gè)行為模式。你需要 webfontloader, 除了提供常用的第三方字體加載方式之外，最主要的功能是可以判斷字體加載的各個(gè)階段并賦予相應(yīng)的 CSS 類來控制目標(biāo)內(nèi)容的樣式。
html.wf-loading { visibility: hidden;}
html.wf-active,html.wf-inactive { visibility: visible;}
上面這段代碼很容易閱讀，即在字體加載時(shí)隱藏 html 內(nèi)容，加載完成或失敗時(shí)顯示。
了解更加詳細(xì)的可以點(diǎn)擊??：Google Webfont optimization
本文查閱的相關(guān)文檔：
https://en.wikipedia.org/wiki/List_of_typefaces_included_with_OS_X
https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
https://en.wikipedia.org/wiki/Open-source_Unicode_typefaces
https://en.wikipedia.org/wiki/Typeface
http://www.cssfontstack.com/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en#optimizing-loading-and-rendering
http://www.cnblogs.com/Coding-net/p/5629680.html
