我该如何只使用拉丁字符子集与Google字体WOFF2文件？

Question

我想使用Google Fonts添加一个字体，但是我发现了一些奇怪的行为。

我想仅添加拉丁字符集的字体，不需要拉丁扩展、西里尔文或西里尔文扩展字符集，以减轻代码负担。我知道这是默认行为，所以我按照以下方式操作：

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher">

在Firefox中（以及其他不支持WOFF2的浏览器中），我获得了正确的输出：

@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLbrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

但在Chrome中，我得到了这个：

/* cyrillic */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLV4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLZQV2lvL5Ba9FjAYK6Lx0Qk.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;
}

我以为，也许拉丁字符子集不再是默认行为了，所以我在我的<link>中添加了subset GET参数:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin">

但它并没有改变输出结果。当我使用&subset=cyrillic时，Firefox中会发生变化，但Chrome的输出结果仍然相同。

有没有一种方法只输出拉丁子集？

或者说，如果页面上不需要WOFF2和unicode-range，它们就不会被下载吗？在这种情况下，从CSS文件中删除cyrillic调用只能获得8行代码，也就是大约300字节，这根本不值得吗？

- webdif

---

我建议不要依赖于 Google Fonts 作为主机，但你可以使用“text”参数请求拉丁字符集：http://codepen.io/iautomation/pen/gbPwxe（通过单击齿轮图标查看样式表资源）。 - iautomation

Answer 1

这个技巧在于优化：

unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

有了这个，浏览器就知道它是否需要下载字体，这取决于它刚刚在html中加载的字符。 目前只有Chrome 完全支持此功能。

MDN将Firefox 36+列为完全忽略此规范，因此Google Fonts必须提供最小的font-face规范。Safari也是如此。

编辑：到2022年11月，浏览器支持率超过98％。

无论如何，这是一次有趣的30分钟网络之旅，我希望能帮助任何进一步的互联网旅行者。这应该说明为什么您可以使用Google Fonts作为CDN来托管字体以获得最佳性能，而不是自己提供字体。

- Daryl Teo

---

请注意，如果客户端浏览器支持unicode-range（http://caniuse.com/#feat=font-unicode-range），则subset参数将被忽略。 - Andre Figueiredo

回答很好，但有些过时的信息：目前的 Firefox 和 Safari 已支持 unicode-range。http://caniuse.com/#search=unicode-range - Tim Grant

Answer 2

如果您需要从 Google Fonts 下载具有特定字符集的字体，请使用 Google Font API 中的文本参数。

例如：

https://fonts.googleapis.com/css?family=Yomogi&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-

- fearis