Question

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

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

从css中的serveur下载字体：

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

还有别的吗？

谢谢！

Answer 1

最快的方法就是不要这样做;）在你的情况下，最好的选择是从谷歌cdn加载它，并希望你的用户已经从使用它的页面的上一次访问中获得了兑现。

Answer 2

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>

如果您想知道发生了什么，请按以下步骤进行一些解释。

预连接到Google字体来源。它可以帮助页面更快地加载告诉浏览器将来需要什么资产。
预加载字体文件。这样可以确保它们较早可用，并且减少阻塞页面渲染的可能性，从而提高性能。请记住，“ display = swap”对于在Google Pagespeed上得分很重要洞察力。
在加载功能上应用CSS。要求浏览器加载CSS 与打印上下文异步，但是只要CSS文件加载，然后将其应用于所有上下文。
如果在浏览器中禁用了Javascript，则会回调。

Answer 3

这三种方式都很好但是当涉及页面加载时，第三种方式将是完美的。因为您将把所有内容保存在本地，无需拨打多个电话。

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

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

Answer 4

我希望最快使用@font-face从您自己的服务器加载它，因为DNS查找次数较少，而且您的服务器负载可能低于Google的负载。

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

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

Answer 5

这实际上取决于您自己的服务器的速度。如果你的服务器速度很快，我当然更喜欢第三种方法：

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

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

检查哪个更快的一种非常有效的方法是转到this website called pingdom。从那里，您输入您的网页URL，然后它将显示每个文件下载所花费的时间。您也可以在那里看到所有字体文件，以及每个文件下载所需的时间。尝试使用所有3种不同的方法，找出Pingdom中最快的方法。

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

5 个答案: