网站加载Web字体的最快方法是什么？

Question

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

1. Using google fonts in the html: <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
2. Using google fonts in the CSS: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

3. Downloading the font from the serveur in the css:

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

4. Something else?

谢谢！

- user279274

---

请选择一个答案。 - Roshan Bhumbra

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 on load函数，请求浏览器异步加载打印上下文中的CSS文件，但一旦CSS文件加载完成，则将其应用于所有上下文。
4. 如果浏览器禁用了Javascript，则回退。

- Tharaka Nuwan

---

请问您能详细说明一下第四步吗？如果禁用JS，我需要在CSS中添加任何内容以使其正常工作吗？ - Dakopen

@Dakopen 不，我们正在调用相同的CSS文件。因为只有在JavaScript被禁用时才会执行此操作。 - Tharaka Nuwan

Answer 2

这真的取决于你自己的服务器速度有多快。如果你的服务器速度非常快，当然我会更喜欢第三种方法：

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

然而，如果你的服务器非常慢，那么第一种或第二种方法会更快，就像我的情况一样。

检查哪种方法更快的一个非常有效的方法是前往这个名为Pingdom的网站。在那里，你输入你的网页URL，然后它会显示每个文件下载所需的时间。

你也可以在那里看到所有的字体文件，以及每个文件下载所需的时间。尝试使用三种不同的方法，并通过Pingdom找出哪种方法最快。

- CZX

Answer 3

最快的方法是不做它;) 在您的情况下，最佳选项是从Google CDN加载它，并希望您的用户已经从先前使用它的页面访问中缓存了它。

- Aleksandrenko

Answer 4

我认为最快的方法是使用@font-face从自己的服务器加载，因为它可以减少DNS查询次数，并且您的服务器可能比Google的负载更小。

如果您希望它加载得更快，可以将@font-face属性内联到文档头中，但我建议将其保留在样式表中。

不过，如果您愿意使用一些javascript，this 看起来是我能找到的最快的方式。

- Roshan Bhumbra

Answer 5

这三种方式都可以，但是在页面加载方面，第三种方式会更完美。因为你可以将所有内容保存在本地，无需进行多次调用。

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

这很完美，因为在第一种方法中，显然你正在从不同的服务器调用字体，这将增加加载时间，在第二种方法中会发生多次调用，所以第三种方法是完美的。

- Gaurav Aggarwal

---

只有当用户接近您的服务器并且用户尚未获得字体的缓存版本时，才能实现完美。CDN是为了提高性能而创建的。 :) - jacmoe

为什么无条件从多个服务器加载内容会增加加载时间？ - Álvaro González

事实上，使用多个服务器有时会增加性能 :-) 你认为为什么存在CDN呢？像Chrome这样的浏览器每个域名只允许一定数量的同时连接。 - HaukurHaf