为页面上的所有数字设置特定字体

Question

为页面上的所有数字设置特定字体

javascriptcssregexnumbersfont-family

12

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

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

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

- dmr

1

我不知道这是否有用，但是看一下吧。http://johndoesdesign.com/blog/2012/jquery/targeting-a-specific-word-using-javascript-and-jquery/ - Kakalokia

1

你可以按照你所描述的使用JavaScript完成，或者你可以通过将“字母”字体中的数字字形替换为“数字”字体中的数字字形来创建自定义字体。 - thirtydot

2个回答

1

在你的数字周围加上一个<span class="number">听起来是一个不错的、语义化的方法。

事实上，CSS3没有提供替代方案，我也没有看到CSS4中有任何即将推出的内容。如果你看一下最新的CSS3建议书，它并没有指定任何内容选择器，但旧的2001年候选建议书是最后一个提供:contains()伪类的版本。

这将让你匹配包含数字的元素：

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

即使这确实可用，它也匹配p而不是数字，因此整个p将被样式化...这不是您想要的。CSSWG正在研究这些想法来格式化数字内容...仍然不是您想要的。

要将CSS应用于数字，无法避免一些额外的标记。

- Anson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

通过遍历文档，您可以在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; }

最后，而且最重要的是，不要这么做。如果您对字体中的数字感到不满意，请不要使用该字体。