如何仅将拉丁语子集与 Google 字体 WOFF2 文件一起使用？答案

【问题标题】：How can I only use Latin subset with Google Fonts WOFF2 files?如何仅将拉丁语子集与 Google 字体 WOFF2 文件一起使用？
【发布时间】：2014-12-30 11:00:49
【问题描述】：

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

我想添加一个只有拉丁子集的字体，我不想要 latin-ext、cyrillic 或 cyrillic-ext 子集，以减轻代码的负担。我知道这是默认行为，所以我这样做了：

<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 文件中的 8 行代码，也就是说大约 300 字节，这不值得吗？

【问题讨论】：

我建议不要依赖谷歌字体作为主机，但是你可以使用“text”参数请求拉丁字符集：codepen.io/iautomation/pen/gbPwxe（点击齿轮图标查看样式表资源）

标签： webfonts google-font-api woff

【解决方案1】：

诀窍在于这种优化：

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

这样，浏览器就知道它是否需要下载字体，这取决于它刚刚加载到 html 中的字符。 Chrome 是目前唯一带有full support for this 的。

MDN 将 Firefox 36+ 列为完全忽略此规范，因此 Google 字体必须为其提供最小字体规范。 Safari 也是如此。

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

【讨论】：

来自docs：Please note that if a client browser supports unicode-range (http://caniuse.com/#feat=font-unicode-range) the subset parameter is ignored;
很好的答案，但有一些过时的信息：当前的 Firefox 和 Safari 现在支持 unicode-range。 caniuse.com/#search=unicode-range

【解决方案2】：

如果您需要从谷歌字体下载具有特定字符集的字体，请使用text parameter in google font api

示例：

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

【讨论】：