我如何 'leverage browser caching' 获得 Google 字体？
How do I 'leverage browser caching' for Google fonts?
我通过 Pingdom 测试了我的网站并得到了这个：
我进行了搜索，但找不到解决方案。有谁知道我怎样才能得到这个 14 到 100？
由于你无法控制Googles headers（包括到期headers），我只能看到一个解决方案——下载这两个样式表和字体到你自己的托管服务器，改变HTML 相应标记。
然后，您可以根据需要设置到期时间headers（Pingdom 所谓的'lifetime'）。
例如打开first link:
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
下载此 .woff2 文件并将其保存在您的网络服务器上的任何位置。将这段样式表复制并粘贴到您自己的任何 CSS 文件或 HTML 中。将 link 从 fonts.gstatic.com 更改为新的 URL。
Google 提供这些字体，有效期为 1 天。您现在可以轻松地将其设置为 30 天。
不是一个完整的解决方案，但您可以通过将两个请求合并为一个来改善这种情况：
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
我对 one of my sites 上的两种字体进行了此操作，得分为 86 而你的得分为 14。重要的是，这是一个真正的加速，而不仅仅是降低任意分数的 hack。
一个相当简单的解决方法是使用 Font Squirrel 的 Webfont 生成器生成您自己的工具包：
https://www.fontsquirrel.com/tools/webfont-generator
为了能够使用它，您需要下载字体（Montserrat 和 Open Sans 都可以在 Font Squirrel 上使用）并将它们添加到生成器中。这可用于添加进一步的自定义。 （在 Google Webfonts 中的字体没有必要的匈牙利语子集的情况下，我已经多次使用它，即使它在原始字体中可用。）
首先，澄清缓存 Google 字体 CSS 文件和实际字体文件之间的区别很重要。根据Google Fonts FAQs，他们的字体文件实际上缓存了一年。这是缓存 24 小时的 CSS 个文件：
Requests for CSS assets are cached for 1 day. This allows us to update a stylesheet to point to a new version of a font file when it’s updated, and ensures that all websites using fonts hosted by the Google Fonts API will be using the most updated version of each font within 24 hours of each release.
The font files themselves are cached for one year, which cumulatively has the effect of making the entire web faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites. We do sometimes update font files to reduce their file size, increase coverage of languages, and improve the quality of their design. The result is that website visitors send very few requests to Google: We only see 1 CSS request per font family, per day, per browser.
我建议不要自己托管这些 CSS 文件，因为您会落伍并且不会在更新时使用最新版本的字体。
但是，有几种方法可以加快 CSS 请求的速度：
- 正如 Mark 在他的回答中提到的，您可以将两个网络字体合并为一个请求：
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
- 如果您只使用任一字体的特定样式，则只能加载您实际使用的样式。在这里，我们加载了所有的 Montserrat，但只加载了三种风格的 Open Sans；常规 (400)、斜体 (400i) 和粗体 (700)：
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
请注意，您不得缓存 Google 提供的 css 超过 24 小时。
我要做的是使用代码将 PHP 作为 post 处理器添加到我的 .htaccess 文件中的 CSS 文件中（我使用的是自定义 . pcss 文件扩展名 - 只是为了让它与我的简单 CSS 文件分开）：
<FilesMatch "\.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>
然后我在 CSS 文件中使用了以下代码来获取并回显我想要的 URL 字体的内容。
<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>
我看到很多答案都建议您下载 CSS 并自己托管。不要这样做，因为 Google 字体会根据浏览器的功能为每个浏览器发送不同的 CSS。
一个快速的解决方案可以是 Easy Fonts CDN 托管所有 google 字体，并提供一些附加值，例如：
- CSS 个文件已过期。 （这将解决您的利用浏览器缓存的问题）
- 易于调试的字体文件名。
- 字体类。您可以轻松使用 CSS 类 来使用 HTML 中的字体，例如
<div class="font-open-sans"></div>、<div class="font-lato"></div> 等。完整的参考资料可用 here。
- 单个 all-in-one 字体文件的选项，您可以将其包含在所有项目中，而无需一次又一次地查找 Google 字体目录以获得新的 CSS URLs.
- 节省 1 次额外的 DNS 查找，因为 Google CSS 托管在 fonts.googleapis.com 中，实际字体文件由 fonts.gstatic.com 提供，而 Easy Fonts 的 CSS和字体文件均由 pagecdn.io 提供。如果您将 PageCDN 用于其他开源资源，或者如果您在 PageCDN 上托管自己的文件，那么这实际上会 为您节省 2 次 DNS 查找 ，因为所有文件都在用于其他资源的单个主机上提供文件，并且没有专门的字体 DNS 查找。
- 一致 CSS URLs。 CSS 一个字体系列将始终通过一个 URL 加载。这增加了浏览器缓存的重用。 Google 字体 CSS 文件混合字体系列名称并创建无限可能的 CSS 文件。这减少了跨网站的浏览器缓存共享。
如果您只想使用 Open Sans 和 Montserrat 字体，这是您的代码：
<link href="https://pagecdn.io/lib/easyfonts/montserrat.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
如果要使用 all-in-one 文件，请使用：
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
我通过 Pingdom 测试了我的网站并得到了这个：
我进行了搜索，但找不到解决方案。有谁知道我怎样才能得到这个 14 到 100？
由于你无法控制Googles headers（包括到期headers），我只能看到一个解决方案——下载这两个样式表和字体到你自己的托管服务器，改变HTML 相应标记。
然后，您可以根据需要设置到期时间headers（Pingdom 所谓的'lifetime'）。
例如打开first link:
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
下载此 .woff2 文件并将其保存在您的网络服务器上的任何位置。将这段样式表复制并粘贴到您自己的任何 CSS 文件或 HTML 中。将 link 从 fonts.gstatic.com 更改为新的 URL。
Google 提供这些字体，有效期为 1 天。您现在可以轻松地将其设置为 30 天。
不是一个完整的解决方案，但您可以通过将两个请求合并为一个来改善这种情况：
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
我对 one of my sites 上的两种字体进行了此操作，得分为 86 而你的得分为 14。重要的是，这是一个真正的加速，而不仅仅是降低任意分数的 hack。
一个相当简单的解决方法是使用 Font Squirrel 的 Webfont 生成器生成您自己的工具包：
https://www.fontsquirrel.com/tools/webfont-generator
为了能够使用它，您需要下载字体（Montserrat 和 Open Sans 都可以在 Font Squirrel 上使用）并将它们添加到生成器中。这可用于添加进一步的自定义。 （在 Google Webfonts 中的字体没有必要的匈牙利语子集的情况下，我已经多次使用它，即使它在原始字体中可用。）
首先，澄清缓存 Google 字体 CSS 文件和实际字体文件之间的区别很重要。根据Google Fonts FAQs，他们的字体文件实际上缓存了一年。这是缓存 24 小时的 CSS 个文件：
Requests for CSS assets are cached for 1 day. This allows us to update a stylesheet to point to a new version of a font file when it’s updated, and ensures that all websites using fonts hosted by the Google Fonts API will be using the most updated version of each font within 24 hours of each release.
The font files themselves are cached for one year, which cumulatively has the effect of making the entire web faster: When millions of websites all link to the same fonts, they are cached after visiting the first website and appear instantly on all other subsequently visited sites. We do sometimes update font files to reduce their file size, increase coverage of languages, and improve the quality of their design. The result is that website visitors send very few requests to Google: We only see 1 CSS request per font family, per day, per browser.
我建议不要自己托管这些 CSS 文件，因为您会落伍并且不会在更新时使用最新版本的字体。
但是，有几种方法可以加快 CSS 请求的速度：
- 正如 Mark 在他的回答中提到的，您可以将两个网络字体合并为一个请求：
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans - 如果您只使用任一字体的特定样式，则只能加载您实际使用的样式。在这里，我们加载了所有的 Montserrat，但只加载了三种风格的 Open Sans；常规 (400)、斜体 (400i) 和粗体 (700)：
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
请注意，您不得缓存 Google 提供的 css 超过 24 小时。
我要做的是使用代码将 PHP 作为 post 处理器添加到我的 .htaccess 文件中的 CSS 文件中（我使用的是自定义 . pcss 文件扩展名 - 只是为了让它与我的简单 CSS 文件分开）：
<FilesMatch "\.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>
然后我在 CSS 文件中使用了以下代码来获取并回显我想要的 URL 字体的内容。
<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>
我看到很多答案都建议您下载 CSS 并自己托管。不要这样做，因为 Google 字体会根据浏览器的功能为每个浏览器发送不同的 CSS。
一个快速的解决方案可以是 Easy Fonts CDN 托管所有 google 字体，并提供一些附加值，例如：
- CSS 个文件已过期。 （这将解决您的利用浏览器缓存的问题）
- 易于调试的字体文件名。
- 字体类。您可以轻松使用 CSS 类 来使用 HTML 中的字体，例如
<div class="font-open-sans"></div>、<div class="font-lato"></div>等。完整的参考资料可用 here。 - 单个 all-in-one 字体文件的选项，您可以将其包含在所有项目中，而无需一次又一次地查找 Google 字体目录以获得新的 CSS URLs.
- 节省 1 次额外的 DNS 查找，因为 Google CSS 托管在 fonts.googleapis.com 中，实际字体文件由 fonts.gstatic.com 提供，而 Easy Fonts 的 CSS和字体文件均由 pagecdn.io 提供。如果您将 PageCDN 用于其他开源资源，或者如果您在 PageCDN 上托管自己的文件，那么这实际上会 为您节省 2 次 DNS 查找 ，因为所有文件都在用于其他资源的单个主机上提供文件，并且没有专门的字体 DNS 查找。
- 一致 CSS URLs。 CSS 一个字体系列将始终通过一个 URL 加载。这增加了浏览器缓存的重用。 Google 字体 CSS 文件混合字体系列名称并创建无限可能的 CSS 文件。这减少了跨网站的浏览器缓存共享。
如果您只想使用 Open Sans 和 Montserrat 字体，这是您的代码：
<link href="https://pagecdn.io/lib/easyfonts/montserrat.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
如果要使用 all-in-one 文件，请使用：
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />