6

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

我在我的项目中使用 Google 字体，现在想更改 unicode-range，所以只有数字会受到影响（请参阅上面的链接答案）。我的问题是我不能让它与包含一起工作：

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

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

@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 时我真的需要自己托管字体吗？

4

2 回答 2

4

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

例如：

@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");

文档

于 2015-09-09T19:58:57.587 回答
0

是什么unicode-range？

这是一个用来告诉浏览器何时下载字体文件的道具。只要呈现属于给定范围的任何字符：下载字体文件。

unicode-range不打算将样式分配给给定范围内的字符。

解决方案

最好的选择是使用text参数来获取每个样式的字体文件，其中只包含您需要的字符，在本例中为 range [0-9]。

网址：

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');
}
于 2022-01-28T18:46:47.167 回答