使用 unicode_range 仅排除数字

2024-01-04

我正在使用自定义字体并通过@font-face加载它。文本看起来不错,但数字看起来很奇怪(仅在 chrome-windows 上,这是一个众所周知的错误。是的,我尝试使用 chrome 的 svg 格式,它解决了数字问题,但搞乱了文本)。我决定将我自己的字体限制为仅[a-z][A-Z],并使用这个发电机 http://renaun.com/flex4/fefurg/收到:

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

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

提前致谢!

附注 当我谈论这个主题时 - 我假设没有办法加载相同的字体两次 - 使用.svg文件中的数字和.otf对于文本,对吧?因为如果可能的话那就太棒了。


您可以使用@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 https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-rangeFirefox 或 IE 8 或更早版本不支持。它们的失败方式不同:对于上面的代码,IE 8 使用 Times New Roman,忽略后者@font-face规则,而当前的 Firefox 使用 Arial,就好像unicode-range不存在限制。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 unicode_range 仅排除数字 的相关文章

随机推荐