【发布时间】：2015-05-19 09:42:59
【问题描述】：
我通过 Pingdom 测试了我的网站并得到了这个：
我搜索但找不到解决方案。有谁知道我怎样才能得到这个 14 到 100？
【问题讨论】：
-
不要下载和自托管 CSS 来解决这个问题。 stackoverflow.com/a/57073920/369005
标签： browser-cache google-font-api
【发布时间】：2015-05-19 09:42:59
【问题描述】：
不是一个完整的解决方案，但您可以通过将两个请求合并为一个来改善这种情况：
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
我对@987654321@ 上的两种字体执行此操作，得分为 86，而您的得分为 14。重要的是，这是真正的加速，而不仅仅是降低任意分数的技巧。
【讨论】：
-
这种方法是真正的加速（我认为）。将字体放在您自己的服务器上的替代方法（在您的服务器上增加更多负载）更有可能在测试中显示“100”时减慢速度。真实表现 > 考试成绩。
-
我想知道这是否意味着更少的缓存命中。一路上所有字体都被缓存了，但是对于可变长度的任意组合，这种可能性要小得多。
-
@KnightHawk “服务器负载更多”真的不是一个合法的论点。在现代，一个基本的 nginx 实例可以提供 huge 数量的静态内容。更不用说具有适当缓存标头的 nginx 了。此外，如果您在 Cloudflare 之类的 CDN 上托管字体文件 - 您肯定会比从 Google 更快地获取内容。具有讽刺意味的是，谷歌页面性能工具抱怨谷歌资源:)))
-
但这并不意味着首先寻找
Montserrat，如果不可用则寻找Open+Sans？
由于您无法控制 Google 的标头（包括过期标头），我只能看到一种解决方案 - 将这两个样式表和字体下载到您自己的托管服务器，并相应地更改 HTML 标签。
然后，您可以根据需要设置过期标头（Pingdom 称为“生命周期”）。
例如打开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 中。将链接从 fonts.gstatic.com 更改为您的新 URL。
Google 提供这些字体的有效期为 1 天。您现在可以轻松地将其设置为 30 天。
【讨论】：
-
谢谢，我希望我不必下载字体，但我想这是唯一的方法。我想知道为什么积极鼓励 PageSpeed 的 Google 甚至不缓存自己的字体。无论如何，谢谢你。我会在 2 分钟内接受你的回答。
-
J82，或许，他们希望能够随时快速修改字体。但是，作为个人用户，您可能对当前版本感觉良好并将其缓存数月 :)
-
请不要这样做。 CSS 文件的内容因用户代理而异！如果你用 Chrome 打开文件并保存内容，它只适用于 Chrome 等！如果您想从自己的服务器提供 CSS 文件，您需要提供跨浏览器解决方案。 localfont.com 可以选择为您从谷歌字体中的任何字体生成此 CSS。如果您愿意，您也可以下载所有浏览器格式的字体文件并从您的主机上提供这些文件。
-
@udondan 你确定吗？当我打开这些 CSS 文件中的任何一个时，我看不到任何与浏览器相关的内容。此外，如果 Google 认为 1 天的缓存是可以的 - 可能不涉及用户代理调整？
-
仅供参考——我使用此工具下载 Google 字体以供离线使用。节省了时间：google-webfonts-helper.herokuapp.com/fonts
首先，重要的是要明确缓存 Google 字体 CSS 文件和实际字体文件之间的区别。根据Google Fonts FAQs的说法，他们的字体文件实际上缓存了一年。就是缓存 24 小时的 CSS 文件：
对 CSS 资产的请求会缓存 1 天。这允许我们更新样式表以在更新时指向字体文件的新版本，并确保所有使用由 Google Fonts API 托管的字体的网站将在每次发布后 24 小时内使用每种字体的最新版本.
字体文件本身缓存一年，累积起来有让整个网络更快的效果：当数以百万计的网站都链接到相同的字体时，它们在访问第一个网站后被缓存，并立即出现在所有其他网站上随后访问的网站。我们有时会更新字体文件以减小文件大小、增加语言覆盖率并提高设计质量。结果是网站访问者向 Google 发送的请求很少：我们只看到每个字体系列、每天、每个浏览器的 1 个 CSS 请求。
我建议您不要自己托管这些 CSS 文件，因为您会落后并且不会使用最新版本的字体更新。
但是，有几种方法可以加快 CSS 请求：
- 正如 Mark 在他的回答中提到的，您可以将两种网络字体组合成一个请求：
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans - 如果您只使用任一字体的特定样式，则只能加载您实际使用的样式。这里我们加载了所有的蒙特塞拉特，但只加载了三种风格的 Open Sans；常规 (400)、斜体 (400i) 和粗体 (700)：
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
【讨论】：
-
其实这个答案比目前公认的更好。是的，页面速度工具抱怨 google 网络字体的 css 文件缓存控制标头，但您可以放心地忽略它，因为 css 文件非常小。相反，专注于谷歌网络字体之外的任何资源，或者执行上述操作。我不会担心需要 50 毫秒的一两个请求。
-
你所说的“落后”到底是什么意思？说真的，您是否希望 Google 在 5 到 10 年内更改字体的频率不止一次？即使他们这样做，您真的相信大多数最终用户会关心吗？我很难想象有人会说“哦，这个 Roboto 'e' 字母已经过时了，它应该宽一个像素，谷歌在 2 周前更新了它”。我的解决方案是一种解决方法，但它是合法的，它有效，它回答了问题。它甚至还有一个优势——完全独立，不再依赖外部资源（例如内网网站）
-
这很公平，丹尼斯·梅森科。自托管字体和谷歌字体都有优点和缺点。我听说过以破坏设计的方式更新字体的故事，并且减少依赖关系很棒。另一方面，有时字体更新包括新语言或更小的文件大小，并且 CDN 可能会带来缓存优势。我看到了两种方法的论据。我主要想指出的是，1 天的缓存期适用于 CSS 文件，字体文件本身会缓存一年。
-
但这并不意味着先寻找
Montserrat，如果不可用再寻找Open+Sans？ -
@PardeepJain，不，这是谷歌字体允许的一种特殊语法，可以说“获取这两种字体：”stackoverflow.com/a/33984674/7816145 我想你可能会感到困惑，因为它看起来有点像这样的代码逻辑，但这是完全不同的事情：
if(Montserrat || OpenSans) { doSomething(); }
请注意，您不能将 Google 提供的 css 缓存超过 24 小时。
【讨论】：
我看到许多建议您下载 CSS 并自己托管的答案。不要这样做，因为 Google 字体会根据浏览器的功能为每个浏览器发送不同的 CSS。
一个快速的解决方案可以是Easy Fonts CDN，它托管所有谷歌字体，并提供一些附加值，例如：
- CSS 文件过期。 （这将解决您利用浏览器缓存的问题）
- 易于调试的字体文件名。
- 字体类。您可以轻松使用 CSS 类来使用 HTML 中的字体，例如
<div class="font-open-sans"></div>、<div class="font-lato"></div>等。完整的参考可在 here 获得。 - 一个单一的多合一字体文件选项，您可以将其包含在所有项目中，而无需一遍又一遍地查找 Google 字体目录以获取新的 CSS 网址。
- 节省了 1 个额外的 DNS 外观，因为 Google CSS 托管在 fonts.googleapis.com 中，实际字体文件从 fonts.gstatic.com 提供，而 Easy Fonts 的 CSS 和字体文件都从 pagecdn.io 提供。如果您将 PageCDN 用于其他开源资源，或者您在 PageCDN 上托管您自己的文件，那么这实际上会为您节省 2 次 DNS 查找，因为所有文件都在用于其他文件的单个主机上提供，并且没有专门的字体 DNS 查找。
- 一致的 CSS URL。一种字体系列的 CSS 将始终通过一个 URL 加载。这增加了浏览器缓存的重用。 Google Fonts 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" />
如果要使用一体式文件，请使用：
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
【讨论】：
一个相当简单的解决方法是使用 Font Squirrel 的 Webfont Generator 生成您自己的工具包：
https://www.fontsquirrel.com/tools/webfont-generator
为了能够使用它，您需要下载字体（Montserrat 和 Open Sans 都可以在 Font Squirrel 上使用）并将它们添加到生成器中。这可用于添加进一步的自定义。 （在 Google Webfonts 中的字体没有匈牙利语必要子集的情况下，我已经多次使用它，即使它在原始字体中可用。）
【讨论】：
我要做的是将 PHP 作为后处理器添加到我的 .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}");
?>
【讨论】：
-
如此可怕的黑客攻击！
-
不推荐，因为这只会减慢网站的 TTFB。此外，Google 会根据浏览器功能加载 CSS。使用这种方法，Google 字体将根据 useragent file_get_contents 发送的任何内容发送 CSS。