2

我正在使用自定义字体并通过@font-face 加载它。文本看起来不错，但数字看起来很奇怪（仅在 chrome-windows 上，这是一个众所周知的错误。是的，我尝试使用 chrome 的 svg 格式，它解决了数字但搞砸了文本）。我决定将我自己的字体限制为 only [a-z][A-Z]，并且使用这个生成器得到了这个：

unicode-range: U+0041-U+005a, U+0061-U+007a;

它似乎......不起作用。数字仍在使用该字体显示。我如何找到合适的范围来使用\其他一些解决方案？我希望有一个通用的解决方案，例如，如果我也想限制未来的字体。

提前致谢！

Ps 当我谈到这个主题时 - 我假设没有办法两次加载相同的字体 - 将.svg文件用于数字和.otf文本，对吗？因为如果可能的话，那也很棒。

4

2 回答 2

5

您可以使用@font-face规则来指定将字体系列名称（由您决定）映射到特定字体，但使用另一种字体的某些字符范围除外。这甚至适用于本地字体，例如如下：

<style>
@font-face {
  font-family: foo;
  src: local("Times New Roman");
}
@font-face {
  font-family: foo;
  src: local("Arial");
  unicode-range: U+0030-0039;
}
p { font-family: foo }
</style>
<p>hello 123</p>

在支持的浏览器上，“hello”出现在 Times New Roman（如果可用）中，但“123”出现在 Arial（如果可用）；范围U+0030-0039是常见的欧洲数字 0 到 9。

您可以对可下载字体使用类似的技术。

坏消息是unicode-rangeFirefox 或 IE 8 或更早版本不支持。它们的失败方式不同：对于上面的代码，IE 8 使用 Times New Roman，忽略后@font-face一条规则，而当前的 Firefox 使用 Arial，就好像没有unicode-range限制一样。

于 2014-05-19T16:58:29.883 回答
1

最后，我使用了“蛮力”方法。使用Font Squirrel 的 webfont 生成器，我重新创建了我的字体文件，并使用高级选项 > 自定义子集，我完全删除了字体中的数字。

似乎是一个糟糕的解决方案，但我能找到最好的解决方案。

于 2014-05-19T13:56:49.183 回答