html - 为网站加载网络字体的最快方法？

Question

我的 HTML 网站将使用 Open Sans 字体，我想知道在保持网站速度的同时加载字体的最佳方式是什么？

1. 在 html 中使用谷歌字体:<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
2. 在 CSS 中使用谷歌字体:@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

3. 在 css 中从服务器下载字体:

   @font-face {  
       font-family: 'MyWebFont';  
       src:  url('font/myfont.woff2') format('woff2'),  
             url('font/myfont.woff') format('woff');  
   }
   

4. 还有别的吗？

谢谢!

Answer 1

2020 Google 字体加载方式。

如果您想要复制和粘贴解决方案，请继续。

<!-- [STEP #1] -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- [STEP #2] -->
<link rel="preload" as="style" href="FontUrl&display=swap" />

<!-- [STEP #3] -->
<link rel="stylesheet" href="FontUrl&display=swap" media="print" onload="this.media='all'" />

<!-- [STEP #4] -->
<noscript>
  <link rel="stylesheet" href="$CSS&display=swap" />
</noscript>

如果你想知道发生了什么，这里是带有简短解释的步骤。

1. 预连接到 google 字体来源。它帮助页面加载更快告诉浏览器它将来需要什么 Assets 。
2. 预加载字体文件。这样可以确保它们更早可用并且不太可能阻止页面的呈现，从而提高性能。请记住“display=swap”对于在 google pagespeed 上得分很重要洞察力。
3. 在加载函数上应用 CSS。请求浏览器加载 CSS与打印上下文异步，但只要 CSS 文件是加载然后将其应用于所有上下文。
4. 如果浏览器中禁用了 Javascript，则回退。