我正试图找出哪一个加载速度更快。检查Chrome中的审核选项卡后，这两种方法都会导致缓慢的第一次有意义的绘制。我正在使用googleapi字体在我的网站中渲染字体。以下是我正在比较的代码
<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>
VS
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
现在似乎托管我本地目录上的字体加载速度较慢。我不确定我所做的是否正确。知道哪一个更快，哪个是实现这个的最好方法？
我只是想把第一个有意义的油漆减少到一半。我使用链接来引用googleapi，但在检查审核时，只需要从googleapi网站加载1,500毫秒。
答案 0 :(得分：1)
您放在<head>标记内的所有内容都将在其他所有内容之前加载。
因此<head>首先加载css文件，然后加载@font-face。
如果使用<head>在<link>内加载字体，浏览器将首先加载字体，然后加载css文件。
所以<link>在性能方面会更快。并不是说这将是一个巨大/显着的差异。
同时
在您的示例中，与 google的cdn 加载或从本地服务器提供服务也有区别。
Cdn的意思是快速提供文件。根据你拥有的服务器，我非常确定google的服务器方式更快。因此，建议使用谷歌的选项加载<link>标记。
另见这个问题，关于@import。但它与@font-face { src: ... ; }