「兩種不同的字體是可能會導(dǎo)致布局發(fā)生變化的，但不是一定，這主要取決于字體的字體高度?！?/p>如何避免?

我們現(xiàn)階段的網(wǎng)頁為了滿足用戶的審美往往會使用一些特殊字體，但與此同時也會帶來一些體驗上的問題，最常見的就是頁面的加載速度以及文本閃爍等。所以我們有必要對字體進行一些優(yōu)化操作來滿足我們“日益挑剔”的用戶。

最粗暴的解決方案是只需要一行CSS代碼就能夠解決。

font-display: optional;

為什么說只需要這一行代碼就能夠解決呢，因為如果 Web 字體在呈現(xiàn)文本時不可用（加上 100 毫秒），它會告訴瀏覽器使用備用系統(tǒng)字體。這意味著在未緩存的頁面加載時，可能會使用備用字體，但所有后續(xù)頁面加載都應(yīng)使用 Web 字體呈現(xiàn)，因為它將被下載并在緩存中可用。

它一共有以下幾個屬性：

上面這樣解釋如果還不太明白的話，可以看看下面這張圖：

「Optional 是唯一保證不發(fā)生布局偏移的字體顯示值」

不幸的是，系統(tǒng)字體不一定是最好的設(shè)計，并且它們在各個操作系統(tǒng)之間并不一致。大多數(shù)設(shè)計師一想到向用戶展示一個備用系統(tǒng)字體就會畏縮。接下來介紹各種優(yōu)化以更快地將字體文件傳送到瀏覽器，允許使用任何字體顯示選項，但顯示系統(tǒng)字體的風險最小，或者用于optional: 以外的選項而不觸發(fā)布局轉(zhuǎn)換。

優(yōu)化網(wǎng)絡(luò)字體有兩種關(guān)鍵方法：子集和格式。

許多字體將具有來自多個字母的字形（字形是單個字符，例如a或&）如果你僅以拉丁字母 (a - Z) 提供并且不使用連字（如é），那么這些字形表示您的字體文件中浪費的字節(jié)。

從此字體中刪除非拉丁字符會產(chǎn)生woff2一個大小為六分之一的文件。

各主流設(shè)備基本都支持 woff2 字體格式，因此網(wǎng)站中沒有必要再引入多種不同格式的字體了。一般地，建議只引入 woff2 就好了，既可以保持代碼的簡潔性，又可以減少上傳到你服務(wù)器的文件。

雖然我們會將字體轉(zhuǎn)換成woff2格式，但文件大小依然有好幾百K，有時甚至是幾M，字體文件的大小也會影響頁面整體的渲染速度。有些時候我們只需要一些極少數(shù)的文字用于特殊字體，那我們就沒必要將一整個字體文件引入了。

當我們遇到上面這種情況時，千萬不要將一整個字體包引入進去，這將極大地浪費網(wǎng)絡(luò)帶寬，從而影響頁面的加載。這里推薦使用font-spider 字蛛來提取文字。

npm install font-spider -g

我們還是以上面那段詩句為例，那里我們用的是漢儀旗黑.woff2字體文件。這里還是經(jīng)過縮小文字庫之后的大概是32K

我們再在項目目錄下執(zhí)行以下命令

font-spider index.html

這時會生成一個.font-spider目錄，并將提取后的字體文件放在該目錄下?，F(xiàn)在的字體文件大概就只有10K，比之前的體積小了好幾倍。

Web 字體很受歡迎，因為它們允許設(shè)計人員在瀏覽器中保持一致的外觀和感覺。如果不需要，系統(tǒng)字體將是呈現(xiàn)文本的最快方法。如果當前的Web字體接近系統(tǒng)字體，您可以使用Monica的Font Style Matcher來調(diào)整字體設(shè)置，直到獲得近乎完美的匹配。

使用系統(tǒng)字體意味著文本將盡可能早地呈現(xiàn)。我們現(xiàn)在還擁有使字體與操作系統(tǒng)匹配的方法，這可能比以前的備用選項（如 Arial 和 Helvetica）更具吸引力。為此，我們需要按特定順序列出所有操作系統(tǒng)的系統(tǒng)字體：

body {  font-family: -apple-system, BlinkMacSystemFont,    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",    "Fira Sans", "Droid Sans", "Helvetica Neue",    sans-serif;}

很明顯，我們?yōu)榱舜_保字體快速且正確地應(yīng)用在我們網(wǎng)頁上，我們必須讓瀏覽器盡快下載我們的字體文件，在我們自己的CDN上托管字體將獲得最佳性能。

一般來說，我們應(yīng)該提供我們服務(wù)器中的字體以避免連接到第三方服務(wù)器的成本，這對于高延遲連接尤其重要。使用第三方服務(wù)意味著您的字體將被延遲。最好的情況是您直接從另一個主機名（例如fonts.gstatic.com）請求字體文件，這會產(chǎn)生連接成本——DNS 查找、TCP 連接和 TLS 協(xié)商。最壞的情況是多跳，例如從fonts.googleapis.com加載引用fonts.gstatic.com上的文件的 CSS 文件，會導(dǎo)致兩次連接損失。所以我們一般會將一些字體文件等靜態(tài)資源托管在我們自己的CDN服務(wù)器上，以此來加快資源的下載速度。

字體可以緩存在兩個地方：「客戶端和CDN」?？蛻舳松系木彺鎸τ跁捴械膶?dǎo)航很重要，并且應(yīng)該以避免重新驗證請求的方式完成。重新驗證請求 (if-not-modified和if-modified-since) 將阻止瀏覽器使用字體文件，直到它驗證它在服務(wù)器上沒有更改。字體很少改變，所以我們應(yīng)該如下實現(xiàn)一個緩存頭，并在字體改變時更新文件名來破壞緩存：

cache-control: max-age=31536000,immutable

這告訴瀏覽器他們可以保留字體長達一年并且不需要重新驗證（ Firefox 和 Safariimmutable支持，Chrome 應(yīng)該自動避免重新驗證請求）。避免將 ETag 添加到這些響應(yīng)中，因為它們可能會強制重新驗證。

還要檢查您的 Content Delivery Network 配置是否可以將字體文件存儲在緩存中，較舊的配置可能不包含.woff2擴展名，從而導(dǎo)致原始命中并減慢響應(yīng)速度。

一般來講瀏覽器不會隨便地去下載字體文件，它們會等到渲染樹構(gòu)建完成后才能知道需要哪些字體。這意味著僅在瀏覽器下載并解析 HTML 和 CSS 時，即在呈現(xiàn)文本之前，才請求 Web 字體?！傅枰⒁獾氖?，內(nèi)聯(lián) CSS 不需要網(wǎng)絡(luò)請求，這意味著我們的字體可以在頁面加載的早期獲取。」

渲染樹的構(gòu)建過程會阻塞Web字體的請求。

但是如果我們確定頁面文本的渲染肯定會用到一些網(wǎng)絡(luò)字體時，我們可以使用preload讓瀏覽器提前下載字體文件。

當瀏覽器解析這行 HTML 時，它會立即發(fā)送一個對字體文件的高優(yōu)先級請求。

「但是需要注意的是，預(yù)加載的請求會占用其它請求的帶寬，所以我們在使用過程需要考慮清楚是否值得這么做?！?/p>將字體轉(zhuǎn)為Base64

還有一種常用的方法是將字體作為 Base64 字符串嵌入到 CSS 中，從而無需額外的字體請求并確保在呈現(xiàn)文本時字體可用。

但這個方法也不是絕對的好方法，它只適合一些小型字體文件，例如上面提到的使用font-spider提取后的字體文件，并且該字體文件足夠小，因為將字體文件轉(zhuǎn)化為Base64字符串往往會增加體積。

一般來講它有以下缺點：

F-mods 是對字體描述符規(guī)范的提議更新，其中包括四個新的描述符：

前三個都影響線的高度：線框高度 = 上升 + 下降 + 線間隙。基線位置 = 線框頂部 + 線間隙 / 2 + 上升。

這四個描述符的組合允許我們通過告訴瀏覽器在下載 Web 字體之前字符將占用多少空間來覆蓋備用字體的布局以匹配 Web 字體。

f-mods只真正修改垂直間距和定位。這意味著仍然需要處理字符間距和字母間距，否則可能會在不同的點出現(xiàn)斷行的單詞，從而導(dǎo)致元素高度發(fā)生變化，從而導(dǎo)致布局發(fā)生變化。但是@font-face 聲明中沒有l(wèi)etter-spacingandword-spacing屬性，因此我們必須在主體或元素上聲明。

@font-face {  font-family: custom-font;  src: url("./public/fonts/漢儀旗黑.woff2");}@font-face {  font-family: fallback-font;  src: local(Arial);  ascent-override: 100%;  descent-override: 20%;  line-gap-override: normal;  advance-override: 10;}/* 這些具體數(shù)值因字體而已，需要按照自己的字體進行計算調(diào)整*/body {  font-family: custom-font, fallback-font;}.content {  letter-spacing: -1.1px;  word-spacing: -0.2px;}

總之，如果瀏覽器沒有及時獲取網(wǎng)絡(luò)字體，并且可以應(yīng)用font-display: optional到網(wǎng)絡(luò)字體，讓瀏覽器以備用系統(tǒng)字體呈現(xiàn)來防止布局偏移，否則的話就只能優(yōu)化我們的字體以嘗試在瀏覽器需要它們之前將它們獲取到瀏覽器：

關(guān)鍵詞： 系統(tǒng)字體 發(fā)生變化 交換網(wǎng)絡(luò) 操作系統(tǒng)