我怎样才能将拉丁子集与Google字体WOFF2文件一起使用？

Question

我想用谷歌字体添加一个字体,我注意到一个奇怪的行为.

我想添加一个只有拉丁子集的字体,我不想要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>的subsetGET参数:

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

但它没有改变输出.当我使用它时&subset=cyrillic,它会在Firefox中发生变化,但Chrome输出是相同的.

有没有办法只输出拉丁子集？

或者只是如果页面上没有需要,将不会下载WOFF2和unicode-range？在最后一种情况下,剥离西里尔语调用的收益只是8行代码而不是css文件,也就是大约300字节,它只是没有任何价值？

Answer 1

诀窍在于这种优化:

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

有了这个,浏览器知道是否需要下载字体,具体取决于它刚刚加载到html中的字符.Chrome目前是唯一一个完全支持此功能的人.

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

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