?一般來說，開發(fā)者對(duì)網(wǎng)頁字體使用會(huì)相對(duì)接觸比較少一些，使用最多也無非是 font-family ，以及可能會(huì)加載幾個(gè)網(wǎng)絡(luò)字體。

加載字體可能會(huì)遇到些問題，在字體加載完成之前，網(wǎng)頁文字會(huì)變成空白，直到字體加載完成，字體文件不大還好說，但是文件一大，就要等很久才能顯示。

可以使用如下方法來解決

font-display

為了解決這種，CSS Fonts Module Level 3?中添加了一個(gè) font-display 屬性，這個(gè)屬性可以讓瀏覽器立即使用備用字體，在web字體加載完成之后立即替換，并重新渲染。

兼容性如下

使用方法

@font-face {
  font-family: 'family-name';
  src: url('${url}');
  font-display: swap;
}

• auto：使用瀏覽器默認(rèn)的行為；
• block：瀏覽器首先使用隱形文字替代頁面上的文字，并等待字體加載完成再顯示；
• swap：如果設(shè)定的字體還未可用，瀏覽器將首先使用備用字體顯示，當(dāng)設(shè)定的字體加載完成后替換備用字體；
• fallback：與 swap 屬性值行為上大致相同，但瀏覽器會(huì)給設(shè)定的字體設(shè)定加載的時(shí)間限制，一旦加載所需的時(shí)長大于這個(gè)限制，設(shè)定的字體將不會(huì)替換備用字體進(jìn)行顯示。Webkit 和 Firefox 中設(shè)定此時(shí)間為 3s；
• optional：使用此屬性值時(shí)，如果設(shè)定的字體沒有在限制時(shí)間內(nèi)加載完成，當(dāng)前頁面將會(huì)一直使用備用字體，并且設(shè)定字體繼續(xù)在后臺(tái)進(jìn)行加載，以便下一次瀏覽時(shí)可以直接使用設(shè)定的字體。

CSS Font Loading API

相對(duì)的在JavaScript層面上也有對(duì)應(yīng)的字體解決方案，CSS Font Loading API可以監(jiān)聽加載事件，在加載完成后通過替換class也可以達(dá)到 font-display: swap的效果。

const font = new window.FontFace('fontFamilyName', 'url(${url})');
document.fonts.add(font);
font.load().then(info => {
  document.body.style.fontFamily = 'fontFamilyName';
}).catch(err => {
  console.log(err);
});