css - 使用 unicode_range 仅排除数字

Question

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

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

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

提前致谢!

附言当我谈到这个问题时 - 我假设没有办法加载相同的字体两次 - 使用 .svg 文件来显示数字，使用 .otf 来显示文本，对吧？因为如果可能的话，那也很棒。

Answer 1

您可以使用@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-range Firefox 或 IE 8 或更早版本不支持。它们以不同的方式失败:对于上面的代码，IE 8 使用 Times New Roman，忽略后面的 @font-face 规则，而当前的 Firefox 使用 Arial，就好像 unicode-range 没有限制。