相信很多小伙伴們?cè)谑褂檬謾C(jī)的時(shí)候會(huì)出現(xiàn)很多不同的字體可以供你選擇使用，那么大家知道“如何輕松解決自定義字體問(wèn)題呢？”這個(gè)問(wèn)題吧！
應(yīng)用情景
業(yè)務(wù)搬磚需求需要用原設(shè)計(jì)稿給出的字體，使用@font-face引入后，發(fā)現(xiàn)字體包太大10M左右，每次請(qǐng)求服務(wù)器10M流量會(huì)造成服務(wù)器壓力，影響用戶(hù)體驗(yàn)
第一步：使用@font-face
MDN概述
這是一個(gè)叫做@font-face 的CSS @規(guī)則 ，它允許網(wǎng)頁(yè)開(kāi)發(fā)者為其網(wǎng)頁(yè)指定在線(xiàn)字體。 通過(guò)這種作者自備字體的方式，@font-face 可以消除對(duì)用戶(hù)電腦字體的依賴(lài)。 @font-face 不僅可以放在在CSS的最頂層, 也可以放在 @規(guī)則 的 條件規(guī)則組 中。
簡(jiǎn)單來(lái)說(shuō)就是可以在網(wǎng)頁(yè)上用自己的字體包 可以放在類(lèi)似@media媒體查詢(xún)等@規(guī)則中
用法
@font-face CSS at-rule 指定一個(gè)用于顯示文本的自定義字體；字體能從遠(yuǎn)程服務(wù)器或者用戶(hù)本地安裝的字體加載. 如果提供了local()函數(shù)，從用戶(hù)本地查找指定的字體名稱(chēng)，并且找到了一個(gè)匹配項(xiàng), 本地字體就會(huì)被使用. 否則, 字體就會(huì)使用url()函數(shù)下載的資源。
通過(guò)允許作者提供他們自己的字體，@font-face 讓設(shè)計(jì)內(nèi)容成為了一種可能，同時(shí)并不會(huì)被所謂的"網(wǎng)絡(luò)-安全"字體所限制(字體如此普遍以至于它們能被廣泛的使用). 指定查找和使用本地安裝的字體名稱(chēng)可以讓字體的自定義化程度超過(guò)基本字體，同時(shí)在不依賴(lài)網(wǎng)絡(luò)情況下實(shí)現(xiàn)此功能。
在同時(shí)使用url()和local()功能時(shí)，為了用戶(hù)已經(jīng)安裝的字體副本在需要使用時(shí)被使用，如果在用戶(hù)本地沒(méi)有找到字體副本就會(huì)去使用戶(hù)下載的副本查找字體。
@font-face 規(guī)則不僅僅使用在CSS的頂層，還可以用在任何CSS條件組規(guī)則中.
簡(jiǎn)單來(lái)說(shuō)就是@font-face 突破網(wǎng)絡(luò)安全限制，可以讓作者自由使用自己想要的字體，可以用在任何css條件組規(guī)則中，這里不對(duì)其local()函數(shù)做額外延伸。
下面貼一個(gè)日常用法：
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),//后綴是字體文件格式 常見(jiàn)有ttf svg等
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}這里提供一個(gè)在線(xiàn)字體轉(zhuǎn)化網(wǎng)站字體格式轉(zhuǎn)化
第二步：字體包壓縮
成功引入后，就發(fā)現(xiàn)字體包太大了，這里就涉及字體包壓縮，使用一個(gè)字體包壓縮器 font-spider。
font-spider使用
基本原理
通過(guò)匹配html中用到的文體，刪除剩余沒(méi)有用到的文字。達(dá)到壓縮字體包的目的。
安裝：
npm install font-spider -g 沒(méi)有安裝node npm的同學(xué)，請(qǐng)尋找安裝方法
使用：
@font-face {
font-family: mysimhei;
src: url(../../../simhei.ttf);
}
p{
font-family: mysimhei;
}注意如果使用要在css文件中先這樣引入：
font-spider ./demo/*.html這里的*號(hào)是表示匹配全部 也可指定html。
font-spider ./demo/*.html ./demo/pages/index.html多文件的話(huà)用空格分開(kāi)
壓縮完成
會(huì)生成一份備份字體文件與壓縮后的字體包
閑談
其實(shí)是對(duì)接香港業(yè)務(wù)，香港的win10操作系統(tǒng)竟然沒(méi)有黑體，客戶(hù)覺(jué)得字體不一樣影響體驗(yàn)，上字體包又太大，所以找出這一套上字體連壓縮的解決方法。（卑微實(shí)習(xí)生）
那么以上就是本文關(guān)于“如何輕松解決自定義字體問(wèn)題呢？”這個(gè)問(wèn)題的解決方法，希望對(duì)大家的學(xué)習(xí)有所幫助，有喜歡html5的小伙伴個(gè)也可以在W3Cschool中進(jìn)行學(xué)習(xí)。
