前言

@font-face允許網頁自帶字體，從而消除對用戶電腦字體的依賴。基本用法如下：

@font-face { font-family: "family-name"; /* 字體名 */ src: url("family-name.eot"); /* IE9 */ src: url("family-name.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("family-name.woff") format("woff"), /* chrome、firefox */ url("family-name.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url("family-name.svg#family-name") format("svg"); /* iOS 4.1- */ unicode-range: ; /* 哪些字符需要使用這個字體 */ 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是一只藍色小鳥，查看這個小鳥源碼，發(fā)現(xiàn)這個元素使用一個空的標簽。該標簽中有一個::before偽元素，內容是"/f179"，字體名是"edgeicons"。我們找到頁面資源，下載這個字體，用字體編輯軟件打開，找到unicode編碼為f179的字形：

可以看到，這個字形就是該網站的LOGO，因此頁面中的這個字就會顯示成LOGO的形狀。使用字體繪制圖標不僅比圖片要更小，減少請求次數(shù)，還可以通過font-size矢量縮放大小，通過color設置圖標顏色，使用起來也是非常便捷。

在線制作的字形圖標的工具，國外用戶推薦fontello，國內用戶推薦iconfont。

反爬蟲抓取

第一次聽到字體竟然可以用于反爬蟲，誰都會大吃一驚。先看例子：

某駱駝訂票網站，頁面上價格明明就是1590，查看源碼怎么就變成1580了？繼續(xù)查css，發(fā)現(xiàn)此處使用@font-face引入一個自定義字體如下：

原來，狡猾的工程師把自定義字體中的字符“8”，形狀繪制成“9”的形狀。這樣頁面中用到這個字體的所有8，都會顯示為9。注意這里字體每次都會動態(tài)生成，并配合生成頁面內容，使得用戶頁面上看到的形狀都是“1590”，從而理解到正確的價格。而蠢萌的爬蟲抓取到的內容，則是錯誤的1580。

在許多競爭激烈的行業(yè)，價格這種敏感數(shù)據(jù)，不能輕易被友商的爬蟲抓取。不過所謂道高一尺、魔高一丈，某貓電影票也使用這種反爬蟲策略，但網上已經出現(xiàn)了對頁面截圖、并進行圖象識別的python腳本。

其他腦洞

受限于公眾號不能直接修改網頁源碼， 有些效果展示不了。有興趣的朋友可以點擊原文鏈接，跳轉到我博客上的原文，了解一下自定義字體的其他應用。

總結

以上是生活随笔為你收集整理的怎么自定义字体_自定义字体@fontface的常见应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。