Css 什么更快（性能）：@font-face还是使用谷歌字体的标准方式（外部资源）？

什么是使用谷歌字体更快

A

@font-face(
 font-family: "myfont";
 src: url("path-file-font-mysite.ttf");
}

B

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

我不知道哪种方法最好，为什么。。。但是：

A：文件在我的网站中

B：是外部资源，但服务器下载速度非常快（谷歌）

---

我希望你能帮助我。非常感谢，我的英语很抱歉；）

视情况而定。如果不查看详细信息，就无法判断其中一个比另一个快，而且每个访问者的速度可能会有所不同。要记住的一些事情：

• 谷歌提供来自区域服务器的字体。当您检查DNS时，您将看到它根据访问者的位置解析为不同的IP。这通常保证了相当快的交付。但这并不意味着它在所有情况下都更快。这取决于网站的受众以及网站的托管位置。如果您的目标受众位于西班牙，并且您的Web服务器也位于西班牙，那么您的客户从自己的主机加载字体可能会更快。如果你瞄准全球范围的客户，在大多数情况下，使用谷歌服务器会更快

• 不过，通过谷歌字体实现字体不仅仅意味着它是从另一台服务器加载字体。此外，还有一个CSS文件必须在加载之前加载。只有在加载CSS文件后才能加载字体。如果您从自己的服务器提供字体，您可能会在主（希望是唯一）CSS文件中有字体定义，从而保存一个http请求

• 浏览器从单个服务器上同时下载的文件最多有一个。我认为这个限制在2到8之间，具体取决于浏览器。如果您从自己的服务器提供大量文件（字体、图像、大量图标而不是CSS精灵），这将降低站点加载速度

• 另一个重要的话题，如果你瞄准全球范围的客户，就是中国。长城防火墙正在阻止谷歌在中国的服务，包括谷歌字体。因此，如果你有潜在的中国客户，一定要使用自己服务器上的字体

---

---

这不是问题的一部分，但值得一提：不要像上面的示例片段那样单独使用TTF文件。谷歌提供的CSS文件是动态的，根据浏览器提供不同的CSS规则和字体文件。只有少数浏览器支持TTF。大多数都需要WOFF或WOFF2，有些需要EOT，有些甚至需要SVG（移动Safari）。如果您想从自己的主机上提供字体，请务必使用下载所有字体变体和与X-Browser兼容的CSS的工具。

谷歌字体本身使用@font-face（这就是webfont嵌入的字面意思），因此我怀疑您完全是在比较两种不同的东西。您的答案非常有趣，非常感谢！正如你建议的那样，我使用了localfont.com，我认为这是一个了不起的工具（太容易使用）。我只有一个疑问：为了减少HTTP请求，我想在文件.css（我用于我的网站）中插入font.css（其中有@font-face）。所以只有一个文件而不是两个。。。好主意还是坏主意？非常感谢，你真是太好了！；）是的，当然是首选。只需复制内容并将其添加到主css文件中。根本不需要额外的文件。完美的，最后一件事。。。我看到了文件的大小。。你知道有没有办法减少这些文件？（.eot.ttf.woff.woff2.svg）？这些文件与Google Fonts提供的文件相同，大小与直接使用Google Fonts相同。同样重要的是，浏览器只加载一个文件，而不是所有文件。尽管如此，您仍然可以启用压缩服务器端（如果尚未启用的话）。例如，你可以用-如果你检查其中一个谷歌字体文件，你会看到他们将其发送到gzip压缩。当然，如何启用压缩取决于您使用的Web服务器。