避免在字体加载过程中显示不可见文本
方法 1：使用 font-displayfont-display 是一个用于指定字体显示策略的 API。swap 用于告知浏览器使用此字体的文本应立即以系统字体显示。自定义字体准备就绪后，系统就会交换系统字体。
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
方法 2：等到自定义字体加载完毕后再使用自定义字体
再多做一点工作，可以考虑采用自定义程度更高的方法。
此方法分为三个部分：
不要通过重构 CSS 在初始网页加载时使用自定义字体，以免在一开始使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
使用 CSS Font Loading API 检测自定义字体的加载时间
更新页面样式以使用自定义字体。
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
这也可以借助 FontFaceObserver 库来实现，有些人发现此 API 更易于使用。
页:
[1]