从Google字体导入时操作unicode-range

Question

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

我在我的项目中使用了Google字体，现在想要更改unicode范围，所以只有数字会受到影响(参见上面的链接答案)。我的问题是，我不能让它与包含：

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

当我像这样导入字体时，Google已经生成了font-face (Google还提供了正确的font-face设置，以避免跨浏览器的问题，非常方便)。我尝试覆盖导入的font-face，如下所示：

@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范围，或者当我想使用unicode范围时，我真的需要自己托管字体吗？

Answer 1

如果您想在导入时设置范围，只需在链接中添加变量'subset‘即可。

例如：

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

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

例如：

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

Documentation

Answer 2

什么是unicode-range

它是一个道具，用于告诉浏览器何时下载字体文件。一旦呈现属于给定范围的任何字符:下载字体文件。

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

解决方案

最好的选择是使用text参数为每个样式获取一个仅包含所需字符的字体文件，在本例中为范围[0-9]。

URL：

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

Google字体响应：

@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');
}