Question

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

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

如果我不能严格地使用CSS，我首先想到的是使用正则表达式用带有“数字”类的跨度来包围所有数字，并为该类应用字体。有更好的方法吗？

Answer 1

您可以通过遍历文档相对简单地在JavaScript中执行此操作，以便在span元素中使用class属性包装任何数字序列，并在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; }

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

Answer 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应用于数字，不会避免一些额外的标记。

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

2 个答案: