从Google Fonts导入时操作unicode范围

Question

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

我在我的项目中使用Google字体，现在想要更改unicode范围，只影响数字（请参见上面链接的答案）。我的问题是，我无法通过include使其工作：

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

当我像这样导入字体时，字体已经由Google生成（Google还提供了正确的字体设置以避免跨浏览器问题，非常方便）。我尝试像这样覆盖导入的字体设置：

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+30-39;
}

但这并没有起作用。为了实现只有数字附加的期望效果，我需要将Google导入URL中的CSS复制到我的自己的CSS/SASS文档中。但是，这样做会失去由Google Fonts API完成的跨浏览器服务和他们CDN的速度。

是否有一种方法可以在保持Google字体导入的同时更改unicode-range，还是当我想使用unicode-range时我真的需要自己托管字体？

- Colonize.bat

---

这是关于编程的相关内容，请翻译成中文。只返回翻译后的文本：请勿添加无关标签/赘语。Sass标签已经被有意删除：这不是Sass问题。 - cimmanon

Answer 1

如果您在导入时想要设置范围，只需在链接中添加变量“subset”。

例如：

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

或者，如果文本非常小，您可以更改文本的子集变量，并将内容添加到其中。

例如：

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

Documentation

- GonzaloT

---

似乎没有改变任何东西。指定“subset”不会改变Google字体生成的字体。https://fonts.googleapis.com/css2?family=Manrope&display=optional与https://fonts.googleapis.com/css2?family=Manrope&display=optional&subset=latin - Vadorequest

请注意，此答案是基于 V1 Google Font API 的。 现在，当从支持 UTF-8 的浏览器访问时，它基本上声明了所有子集，因此浏览器仅下载所需内容。 虽然如果您想要检查，curl 调用应该会给您不同的结果。 更多信息请参见官方 Google 字体存储库问题 113：https://github.com/google/fonts/issues/113 您可能希望通过指定要使用的权重和 display=swap 来减少负载。 - GonzaloT

在他们的文档中实际上支持subset（https://developers.google.com/fonts/docs/getting_started#Subsets），并且还提到了包括拉丁语，但对我来说仍然无效。我只需要拉丁语。最后我参考了这个Stack Overflow的帖子：https://stackoverflow.com/a/70018750/4907950，并使用了`&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-%2F`（%2F是URL编码的斜杠）。 - undefined

Answer 2

什么是unicode-range？

unicode-range是一个属性，用于告诉浏览器何时下载字体文件。只要呈现属于给定范围的任何字符：就会下载字体文件。

unicode-range不旨在为给定范围内的字符分配样式。

解决方案

最好的选择是使用text参数获取每个样式的字体文件，其中包含您需要的字符，即此处的范围[0-9]。

URL：

https://fonts.googleapis.com/css?family=Lato:300,400,700&text=0123456789

谷歌字体的响应：

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh7USewqdFhfZ3-4B28Jv7vc&skey=91f32e07d083dd3a&v=v22) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiUT-eLhTc2OsC1s0&skey=2d58b92a99e1c086&v=v22) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh6UVewqdFhfZ3-4B28Jv7vc&skey=3480a19627739c0d&v=v22) format('woff2');
}

- Leo