方法 1：使用 font-display

font-display 是一个用于指定字体显示策略的 API。swap 用于告知浏览器使用此字体的文本应立即以系统字体显示。自定义字体准备就绪后，系统就会交换系统字体。

1. /* Before */
   
2. @font-face {
   
3.   font-family: Helvetica;
   
4. }
   
5. /* After */
   
6. @font-face {
   
7.   font-family: Helvetica;
   
8.   font-display: swap;
   
9. }

复制代码

方法 2：等到自定义字体加载完毕后再使用自定义字体

再多做一点工作，可以考虑采用自定义程度更高的方法。

此方法分为三个部分：

不要通过重构 CSS 在初始网页加载时使用自定义字体，以免在一开始使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
使用 CSS Font Loading API 检测自定义字体的加载时间
更新页面样式以使用自定义字体。

1. // Define a FontFace
   
2. const font = new FontFace("myfont", "url(myfont.woff)");
   
3. 
   
4. // Add to the document.fonts (FontFaceSet)
   
5. document.fonts.add(font);
   
6. 
   
7. // Load the font
   
8. font.load();
   
9. 
   
10. // Wait until the fonts are all loaded
    
11. document.fonts.ready.then(() => {
    
12.   // Update the CSS to use the fonts
    
13. });

复制代码

这也可以借助 FontFaceObserver 库来实现，有些人发现此 API 更易于使用。

方法 1：使用 font-display

font-display 是一个用于指定字体显示策略的 API。swap 用于告知浏览器使用此字体的文本应立即以系统字体显示。自定义字体准备就绪后，系统就会交换系统字体。

1. /* Before */
   
2. @font-face {
   
3.   font-family: Helvetica;
   
4. }
   
5. /* After */
   
6. @font-face {
   
7.   font-family: Helvetica;
   
8.   font-display: swap;
   
9. }

复制代码

方法 2：等到自定义字体加载完毕后再使用自定义字体

再多做一点工作，可以考虑采用自定义程度更高的方法。

此方法分为三个部分：

不要通过重构 CSS 在初始网页加载时使用自定义字体，以免在一开始使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
使用 CSS Font Loading API 检测自定义字体的加载时间
更新页面样式以使用自定义字体。

1. // Define a FontFace
   
2. const font = new FontFace("myfont", "url(myfont.woff)");
   
3. 
   
4. // Add to the document.fonts (FontFaceSet)
   
5. document.fonts.add(font);
   
6. 
   
7. // Load the font
   
8. font.load();
   
9. 
   
10. // Wait until the fonts are all loaded
    
11. document.fonts.ready.then(() => {
    
12.   // Update the CSS to use the fonts
    
13. });

复制代码

这也可以借助 FontFaceObserver 库来实现，有些人发现此 API 更易于使用。