前言
@font-face允許網頁自帶字體，從而消除對用戶電腦字體的依賴。基本用法如下：
@font-face { font-family: "family-name"; src: url("family-name.eot"); src: url("family-name.eot?#iefix") format("embedded-opentype"), url("family-name.woff") format("woff"), url("family-name.ttf") format("truetype"), url("family-name.svg#family-name") format("svg"); unicode-range: <urange>; font-weight: normal; font-style: normal; }當頁面中用到這個字體，且用戶設備中沒有這個字體，就會從@font-face中指定的路徑下載字體文件。以下幾點請注意：
1.因各瀏覽器對字體的兼容不同，需要同時備有多種字體樣式，請參考瀏覽器兼容情況；
2.字體文件的路徑需要和網頁在同一域名下，否則需要做跨域處理；
3.unicode-range設置只使用該字體的個別字符，有一定實用性，請參考文檔使用；
本文列舉@font-face的常見應用。
自定義字體
@font-face最原始的應用場景，就是使用用戶電腦裡沒有的字體。舉例：
某狗電商網站，使用@font-face引入方正字體。CSS中的@font-face依次配置了eto、woff、truetype、svg四種格式，格式參考上文。Chrome選擇下載woff格式，其餘格式不下載。文件地址來自misc.360buyimg.com域名，與頁面自身域名不一致，使用Cors跨域。至此，字體已下載到用戶的設備中了，可以直接在css中使用通過font-family調用。
成套的中文字體包含大量字符，文件通常都比較大，動輒幾M的字體文件會拖累頁面加載速度，影響用戶體驗。上述這個頁面中，使用到方正字體的只有28個漢字，因此對字體進行了子集化的處理，精簡後文件大小只有6.47K。關於字體子集化，請參考我的上一篇博客。
自定義圖標
@font-face的另一個常見應用，是取代圖片格式的圖標，舉例：
某鳥社交網站的LOGO是一隻藍色小鳥，查看這個小鳥源碼，發現這個元素使用一個空的<i>標籤。該標籤中有一個::before偽元素，內容是"/f179"，字體名是"edgeicons"。我們找到頁面資源，下載這個字體，用字體編輯軟體打開，找到unicode編碼為f179的字形：
可以看到，這個字形就是該網站的LOGO，因此頁面中的這個字就會顯示成LOGO的形狀。使用字體繪製圖標不僅比圖片要更小，減少請求次數，還可以通過font-size矢量縮放大小，通過color設置圖標顏色，使用起來也是非常便捷。
在線製作的字形圖標的工具，國外用戶推薦fontello，國內用戶推薦iconfont。
反爬蟲抓取
第一次聽到字體竟然可以用於反爬蟲，誰都會大吃一驚。先看例子：
某駱駝訂票網站，頁面上價格明明就是1590，查看源碼怎麼就變成1580了？繼續查css，發現此處使用@font-face引入一個自定義字體如下：
原來，狡猾的工程師把自定義字體中的字符「8」，形狀繪製成「9」的形狀。這樣頁面中用到這個字體的所有8，都會顯示為9。注意這裡字體每次都會動態生成，並配合生成頁面內容，使得用戶頁面上看到的形狀都是「1590」，從而理解到正確的價格。而蠢萌的爬蟲抓取到的內容，則是錯誤的1580。
在許多競爭激烈的行業，價格這種敏感數據，不能輕易被友商的爬蟲抓取。不過所謂道高一尺、魔高一丈，某貓電影票也使用這種反爬蟲策略，但網上已經出現了對頁面截圖、並進行圖象識別的python腳本。
其他腦洞
受限於公眾號不能直接修改網頁源碼， 有些效果展示不了。有興趣的朋友可以點擊原文連結，跳轉到我博客上的原文，了解一下自定義字體的其他應用。