什么更快（性能）：@font-face 或使用 Google 字体的标准方式（外部资源）？

Question

什么是使用 google 字体更快？？

一个

@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: 是外部资源，但是服务器下载速度非常快(google)

我希望你能帮助我。非常感谢，对不起我的英语 ;)

Answer 1

视情况而定。如果不查看详细信息，您无法判断一个比另一个更快，并且这些可能因每位访问者而异。一些注意事项：

Google 提供来自区域服务器的字体。当您检查 fonts.googleapis.com or fonts.gstatic.com 的 DNS 时，您会看到它根据访问者的位置解析为不同的 IP。这通常可以保证相当快的交付。但这并不意味着它在任何情况下都更快。这取决于您网站的受众以及您网站的托管位置。如果您的目标受众位于西班牙并且您的网络服务器也位于西班牙，那么您的客户从您自己的主机加载字体可能会更快。如果您在全球范围内定位客户，在大多数情况下使用 Googles 服务器会更快。
通过 Google 字体实现字体不仅意味着它从另一台服务器加载字体。此外，还有一个 CSS 文件必须先加载。只有在加载 CSS 文件后才能加载字体。如果您从自己的服务器提供字体，您可能会在主（希望只有）CSS 文件中有字体定义，从而节省一个 http 请求。
浏览器从单个服务器同时下载的文件数量有上限。我认为这个限制在 2 到 8 之间，具体取决于浏览器。如果您从自己的服务器提供大量文件（字体、图像、大量图标而不是 CSS 精灵），这将减慢您网站的加载速度。
如果您在全球范围内定位客户，另一个重要的话题是中国。中国防火墙正在阻止 Google 服务，包括 Google 字体。所以如果你有潜在的中国客户，一定要使用你自己服务器上的字体。

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

什么更快（性能）：@font-face 或使用 Google 字体的标准方式（外部资源）？

What is faster (performance): @font-face or standard way (external resource) to use Google Fonts?

css

fonts

webfonts

google-font-api

google-webfonts