专门为页面上的所有数字设置字体答案

【问题标题】：Set a font specifically for all numbers on the page专门为页面上的所有数字设置字体
【发布时间】：2012-11-28 17:54:43
【问题描述】：

对于我的网页，我选择了一种适用于所有字母的字体。但是，对于所有数字，我想使用不同的字体。

有没有办法可以设置 CSS 规则来定位页面上的所有数字？

如果我不能严格使用 CSS，我的第一个想法是使用正则表达式将所有数字与“数字”类的范围包围起来，并为该类应用字体。有没有更好的方法来做到这一点？

【问题讨论】：

我不知道这是否有用，但看看它。 johndoesdesign.com/blog/2012/jquery/…
您可以按照您的描述使用 JavaScript 来完成，或者您可以通过将“字母”字体中的数字字形替换为“数字”字体中的数字字形来创建自定义字体。

标签： javascript css regex numbers font-family

【解决方案1】：

您可以在 JavaScript 中相对简单地执行此操作，方法是遍历文档，以便将任何数字序列包装在具有 class 属性的 span 元素中，并在 CSS 中为其声明 font-family。

在纯 CSS 中原则上也是可能的，尽管目前只有 WebKit 浏览器支持：

@font-face {
  font-family: myArial;
  src: local("Courier New");
  unicode-range: U+30-39;
}
@font-face {
  font-family: myArial;
  src: local("Arial");
  unicode-range: U+0-2f, U+40-10FFFF;
}
body { font-family: myArial; }

最后，也是最重要的，不要这样做。如果您对字体中的数字不满意，请不要使用该字体。

【讨论】：

我在unicode-range上查看了CSS3 Font spec...很有趣。
这是一个很好的解决方案。你能帮我怎样才能这样使用：@font-face{ font-family: myArial; src: local("Times New Roman", Times, serif); unicode 范围：U+30-39； }

【解决方案2】：

用<span class="number"> 包围你的号码听起来是一种很好的、语义上合理的方法。

事实上，CSS3 并没有提供替代方案，而且我在CSS4 中看不到任何东西。如果您查看latest CSS3 recommendation，它没有指定任何内容选择器，但旧的2001 candidate recommendation 是提供:contains() 伪类的最后一个版本。

这会让你匹配一个包含数字的元素：

/* Deprecated CSS3 */
p:contains(0), p:contains("1"), p:contains("2") {
    background-color: red;
}

即使这实际上是可用的，它与p 匹配，而不是数字，所以整个p 将被样式化......不是你想要的。 CSSWG 正在使用these ideas 来格式化数字内容...仍然不是您想要的。

要将 CSS 应用于数字，不可避免地需要一些额外的标记。

【讨论】：