从 Google Fonts 导入时操作 unicode-range

Col*_*bat 5 css google-font-api unicode-range

我的问题可以看作是这个答案的后续。

我在我的项目中使用了 Google 字体,现在想更改 unicode 范围,因此只有数字会受到影响(请参阅上面的链接答案)。我的问题是我没有让它与包含一起工作:

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
Run Code Online (Sandbox Code Playgroud)

当我像这样导入字体时,字体已经由谷歌生成(谷歌也提供了正确的字体设置以避免跨浏览器问题,非常方便)。我尝试像这样覆盖导入的字体:

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+30-39;
}
Run Code Online (Sandbox Code Playgroud)

但这没有用。为了实现仅附加数字的预期效果,我需要从 Google 导入 URL 中获取 CSS 并将其复制到我自己的 CSS/SASS 文档中。但是后来我失去了由 Google Fonts API 完成的跨浏览器服务以及他们 CDN 的速度。

有没有办法在保持 Google 字体导入的同时更改 unicode 范围,或者当我想使用 unicode 范围时是否真的需要自己托管字体?

Gon*_*loT 5

如果您想在导入时设置范围,只需将变量“子集”添加到链接即可。

例如:

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin");
Run Code Online (Sandbox Code Playgroud)

或者,如果文本非常小,您可以更改文本的子集变量,然后在其中添加内容。

例如:

@import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");
Run Code Online (Sandbox Code Playgroud)

文档

  • 请记住,这个答案是在 V1 Google Font API 上的。现在,当从支持 UTF-8 的浏览器访问时,它基本上声明了所有子集,以便浏览器仅下载需要的内容。尽管如果你想检查,“curl”调用应该会给你不同的结果。更多信息请参见官方 Google 字体存储库第 113 期:https://github.com/google/fonts/issues/113 您可能希望通过指定要使用的权重和 display=swap 来减少负载 (2认同)