@font-face 或 link 加载速度更快

Question

我正在尝试找出哪个加载速度更快。检查 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');         
}

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

我只是想将第一次有意义的绘画减少一半。我使用 link 来引用 googleapi，但在检查审核后，它只需要 1,500 毫秒就可以从 googleapi 站点加载它。

Answer 1

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

因此 <head> 首先加载 css 文件，然后加载 @font-face.

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

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

还有：

在您的示例中，从 google 的 cdn 加载它或从您的 local[=44 提供它也有区别=] 服务器。

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

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

Including Google Web Fonts link or import?

Answer 2

上面的回答非常具有误导性。

<link> 加载了一个 CSS，里面有 @font-face。它确实更慢。

@font-face 或 link 加载速度更快

Which load faster @font-face or link

css

fonts

google-font-api