Question

我在我的网站中使用区域语言unicode font-face，但数字看起来不太好。

所以我想将新的font-style或css应用于数字..

请帮助

Answer 1

这可以使用@font-face中存在的CSS unicode-range property来完成。

数字0到9存在于U+0030 to U+0039范围内的Unicode中。因此，您需要做的是在现有字体旁边添加字体，该字体专门针对此范围：

@font-face { 
    font-family: 'My Pre-Existing Font';
    ...
}
@font-face {
    font-family: 'My New Font Which Handles Numbers Correctly';
    ...
    unicode-range: U+30-39;
}

这样做的结果是，每个Unicode字符U+0030（0）到U+0039（9）的实例都将以专门针对该范围的字体显示，并且每个其他字符都将显示用你当前的字体。

Answer 2

无法专门为所有数字应用CSS。在每个数字标记中，您可以添加属性class='number'，然后在CSS中添加

.number {
   font-family: arial;
}

Answer 3

您可以使用<span class="number">包装p标签中的所有数字：

CSS

.number {
   font-family: Verdana;
}

的jQuery

$('p').html(function(i, v){
    return v.replace(/(\d)/g, '<span class="number">$1</span>');
});

但就个人而言，我会选择詹姆斯的建议;）

http://jsfiddle.net/ZzBN9/

Answer 4

更好用这个

$('p').html(function(i, v){
    return v.replace(/(\d+)/g, '<span class="number">$1</span>');
});

使用+你可以避免每个完整数字的一个跨度（跨度为321），而不是每个找到的数字一个（跨度为3表示2和1）

Answer 5

您可以使用正则表达式替换并检测数字，然后添加类

以下代码：

$('p').html(function(i,c) {
    return c.replace(/\d+/g, function(v){
    return "<span class='numbers'>" + v + "</span>";
    });
});

.numbers
{
color:red;
font-size:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
View 11 new out of 11 message(s) in your inbox
</p>

如何将css仅应用于文本内部的数字/或任何<p> </p> <p>元素？</p>

5 个答案: