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

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

有没有一种方法可以设置CSS规则来针对页面上的所有数字

---

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

您可以在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; }

---

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

用

环绕数字听起来是一种很好的语义上合理的方法

事实上，CSS3并没有提供一个替代方案，我也看不到未来会有什么变化。如果查看，它没有指定任何内容选择器，但旧版本是提供

：contains（）

伪类的最后一个版本

这将允许您匹配包含数字的元素：

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

即使这实际上是可用的，它也与

p

匹配，而不是与数字匹配，因此整个

p

将被样式化…而不是您想要的。CSSWG正在对数字内容进行格式化…仍然不是您想要的

---

要将CSS应用于数字，必须添加一些附加标记。

我不知道这是否有用，但请看一看。你可以像你描述的那样使用JavaScript，或者你可以通过用“数字”字体中的数字符号替换“字母”字体中的数字符号来创建自定义字体。我在

unicode范围上查看了
…有趣。这是一个很好的解决方案。你能帮我怎么用：@font-face{font-family:myArial；src:local（“Times-New-Roman”，Times，serif）；unicode范围：U+30-39；}