前言

@font-face允許網(wǎng)頁(yè)自帶字體，從而消除對(duì)用戶(hù)電腦字體的依賴(lài)。基本用法如下：

@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: ; /* 哪些字符需要使用這個(gè)字體 */ font-weight: normal; /* 字體粗細(xì) */ font-style: normal; /* 字體樣式 */}

當(dāng)頁(yè)面中用到這個(gè)字體，且用戶(hù)設(shè)備中沒(méi)有這個(gè)字體，就會(huì)從@font-face中指定的路徑下載字體文件。以下幾點(diǎn)請(qǐng)注意：

1.因各瀏覽器對(duì)字體的兼容不同，需要同時(shí)備有多種字體樣式，請(qǐng)參考瀏覽器兼容情況；

2.字體文件的路徑需要和網(wǎng)頁(yè)在同一域名下，否則需要做跨域處理；

3.unicode-range設(shè)置只使用該字體的個(gè)別字符，有一定實(shí)用性，請(qǐng)參考文檔使用；

本文列舉@font-face的常見(jiàn)應(yīng)用。

自定義字體

@font-face最原始的應(yīng)用場(chǎng)景，就是使用用戶(hù)電腦里沒(méi)有的字體。舉例：

某狗電商網(wǎng)站，使用@font-face引入方正字體。CSS中的@font-face依次配置了eto、woff、truetype、svg四種格式，格式參考上文。Chrome選擇下載woff格式，其余格式不下載。文件地址來(lái)自misc.360buyimg.com域名，與頁(yè)面自身域名不一致，使用Cors跨域。至此，字體已下載到用戶(hù)的設(shè)備中了，可以直接在css中使用通過(guò)font-family調(diào)用。

成套的中文字體包含大量字符，文件通常都比較大，動(dòng)輒幾M的字體文件會(huì)拖累頁(yè)面加載速度，影響用戶(hù)體驗(yàn)。上述這個(gè)頁(yè)面中，使用到方正字體的只有28個(gè)漢字，因此對(duì)字體進(jìn)行了子集化的處理，精簡(jiǎn)后文件大小只有6.47K。關(guān)于字體子集化，請(qǐng)參考我的上一篇博客。

自定義圖標(biāo)

@font-face的另一個(gè)常見(jiàn)應(yīng)用，是取代圖片格式的圖標(biāo)，舉例：

某鳥(niǎo)社交網(wǎng)站的LOGO是一只藍(lán)色小鳥(niǎo)，查看這個(gè)小鳥(niǎo)源碼，發(fā)現(xiàn)這個(gè)元素使用一個(gè)空的標(biāo)簽。該標(biāo)簽中有一個(gè)::before偽元素，內(nèi)容是"/f179"，字體名是"edgeicons"。我們找到頁(yè)面資源，下載這個(gè)字體，用字體編輯軟件打開(kāi)，找到unicode編碼為f179的字形：

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

在線(xiàn)制作的字形圖標(biāo)的工具，國(guó)外用戶(hù)推薦fontello，國(guó)內(nèi)用戶(hù)推薦iconfont。

反爬蟲(chóng)抓取

第一次聽(tīng)到字體竟然可以用于反爬蟲(chóng)，誰(shuí)都會(huì)大吃一驚。先看例子：

某駱駝?dòng)喥本W(wǎng)站，頁(yè)面上價(jià)格明明就是1590，查看源碼怎么就變成1580了？繼續(xù)查css，發(fā)現(xiàn)此處使用@font-face引入一個(gè)自定義字體如下：

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

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

其他腦洞

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。