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

Question

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

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

3. 从CSS中的Servur下载字体：

   @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. 预连接到谷歌字体来源。它通过告诉浏览器将来需要哪些资源来帮助更快地加载页面。
2. 预加载字体文件。这可确保它们更早可用，并且不太可能阻止页面的渲染，从而提高性能。请记住，“display=swap”对于在 Google Pagespeed Insight 上得分非常重要。
3. 在加载函数上应用 CSS。要求浏览器与打印上下文异步加载 CSS，但一旦加载 CSS 文件，就将其应用到所有上下文。
4. 如果浏览器中禁用了 Javascript，则进行回退。

Answer 2

最快的方法就是根本不这样做；）在您的情况下，最好的选择是从 google cdn 加载它，并希望您的用户已经从以前使用它的页面访问中兑现了它。