哪个加载更快@font-face 或链接答案

【问题标题】：Which load faster @font-face or link哪个加载更快@font-face 或链接
【发布时间】：2018-08-07 04:43:09
【问题描述】：

我正在尝试找出哪个加载速度更快。检查 Chrome 中的审核选项卡后，这两种方法都会导致 第一次有意义的绘制缓慢。我正在使用 googleapi 字体在我的网站中呈现字体。以下是我正在比较的代码

<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>

对

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');         
}

现在看来，在我的本地目录上托管字体加载速度较慢。我不确定我所做的是否正确。知道哪个更快，最好的实现方式是什么？

我只是想将第一个有意义的绘画减少到一半。我使用链接来引用 googleapi，但在检查审核后，它需要 1,500 毫秒才能从 googleapi 站点加载它。

【问题讨论】：

链接速度更快。 <head> 标签内的所有内容都将在其他所有内容之前加载。如果你把它放在css 文件中，它会在css 文件加载后加载它。
or 是什么意思？这些是同一件事：您显示的链接指向具有（大量）@font-face 规则的 CSS 文件。所以从技术上讲，链接速度较慢，因为在这两种情况下它都是相同的 CSS，只有一个是直接的，另一个需要遵循链接源，但实际上这应该是完全不相关的。如果您的页面速度如此之快，您甚至无法自己衡量速度差异，那么这不是一个值得询问的问题。

【解决方案1】：

您放在<head> 标签中的所有内容都将在其他所有内容之前加载。

所以<head>首先加载css文件，然后加载@font-face。

如果使用<link>加载<head>内的字体，浏览器将首先加载字体，然后是css文件。

所以<link> 在性能方面会更快。并不是说这将是一个巨大/显着的差异。

还有：

在您的示例中，从 google 的 cdn 加载它或从您的 local 服务器提供它也有所不同。

Cdn 旨在真正快速地提供文件。根据您拥有的服务器，我很确定 google 的服务器速度更快。所以谷歌的选项用<link>标签加载它是推荐的方式。

另请参阅这个 SO 问题，它是关于 @import。但它和@font-face { src: ... ; }是一样的

【讨论】：

【解决方案2】：

上面的回答非常误导。

<link> 加载一个内部带有@font-face 的 CSS。它确实更慢。

【讨论】：