摘要：瀏覽器默認方案瀏覽器加載字體完成之前，文本默認是不顯示的，這種情況通常叫做。具體瀏覽器是怎么弄的，參考在指定字體加載完成前用字體先為相應的元素設置字體然后用監(jiān)聽字體加載，在加載完成的時候可以為相應的元素添加新的解決方案相關閱讀使用

此文系讀 font-display 后感，原發(fā)在 issues blog 里面。

瀏覽器加載字體完成之前，文本默認是不顯示的，這種情況通常叫做 FOIT。這種方案的好處是不會經歷一個 fallback 字體 -> 指定字體的一個跳轉，缺點是在網絡差的情況下會有一段時間的空白。默認情況下大多數(shù)瀏覽器會等 3 秒鐘，如果 3 秒鐘之后還是渲染不出來就轉而選擇 fallback 字體，其中 safari 可能會等得更久，在沒有網絡的情況下，文本壓根就不渲染了(因為字體加載不出來)。具體瀏覽器是怎么弄的，參考 Differences in Font Rendering Today

先為相應的元素設置字體：

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

.font-loaded p {
  font-family: "Open Sans Regular";
}

然后用 fontfaceobserver 監(jiān)聽字體加載，在加載完成的時候可以為相應的元素添加 class:

const font = new FontFaceObserver("Open Sans Regular");
const p = document.querySelector("p")
font.load().then(function () {
  p.classList.add("font-loaded")
})

@font-face {
  font-family: "Open Sans Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
  font-display: swap;
}

auto: The default value. The typical browser font loading behavior will take place, which is to hide typefaces that use custom fonts, and then display the affected text when fonts finish loading.

swap: The fallback text is shown immediately until the custom font loads. In most cases, this is what we"re after. JavaScript-driven font loading solutions almost always aim to emulate this setting.

fallback: This is sort of a compromise between auto and swap. There will be a short period of time (100ms according to Google) that text styled with custom fonts will be invisible. The unstyled text will then appear (if the custom font hasn"t already loaded by this point.) Once the font loads, the text is styled appropriately.

optional: Operates exactly like fallback in that the affected text will initially be invisible for a short period of time, and then transition to a fallback font. The similarities end there, though. The optional setting gives the browser freedom to decide whether or not a font should even be used, and this behavior hinges on the user"s connection speed. On slow connections, you can expect that custom fonts may not load at all if this setting is used.

Controlling Font Performance with font-display- Google developers

使用 Google Fonts