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

对于我的网页，我选择了适用于所有字母的字体。但是，对于所有数字，我想使用不同的字体。专门为页面上的所有数字设置字体

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

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

来源

2012-11-28 dmr

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

你可以像你所描述的那样用JavaScript来完成它，或者你可以创建一个自定义字体通过用“数字”字体中的数字字形替换“字母”字体中的数字字形。 – thirtydot

你可以通过让你包的任何数字序列中的span元素与class属性和CSS声明font-family它遍历文档中的JavaScript做相对简单。

有可能在原则上纯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; }

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

来源

2012-11-28 18:14:54

我在'unicode-range'上签出了[CSS3 Font spec]（http://www.w3.org/TR/css3-fonts/#unicode-range-desc）......很有趣。 – Anson

这是很好的解决方案。你能帮我吗？我可以这样使用： @ font-face { font-family：myArial; src：local（“Times New Roman”，Times，serif）; unicode范围：U + 30-39; } – zenon

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

来源

2012-11-28 18:36:41 Anson

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

回答

相关问题