对于我的网页,我选择了一种适合所有字母的字体。然而,对于所有数字,我想使用不同的字体。
有没有一种方法可以设置CSS规则来针对页面上的所有数字?
如果我不能严格使用CSS,我的第一个想法是使用正则表达式将所有数字用带有“numbers”类的包围起来,并应用该类的字体。是否有更好的方法来实现这一点?
对于我的网页,我选择了一种适合所有字母的字体。然而,对于所有数字,我想使用不同的字体。
有没有一种方法可以设置CSS规则来针对页面上的所有数字?
如果我不能严格使用CSS,我的第一个想法是使用正则表达式将所有数字用带有“numbers”类的包围起来,并应用该类的字体。是否有更好的方法来实现这一点?
通过遍历文档,您可以在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; }
最后,而且最重要的是,不要这么做。如果您对字体中的数字感到不满意,请不要使用该字体。
在你的数字周围加上一个<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正在研究这些想法来格式化数字内容...仍然不是您想要的。