9

I am Using a Regional language unicode font-face in my site but the numbers are not looking good.

So I want to apply new font-style or css to numbers only..

please help

4

5 回答 5

24

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

数字 0 到 9 以 Unicode 形式存在于 到 的范围U+0030内U+0039。因此，您需要做的是在现有字体旁边包含一个专门针对此范围的字体：

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

U+0030这样做的结果是，Unicode 字符(0) 到(9)的每个实例都U+0039将以专门针对该范围的字体显示，而其他所有字符都将使用您当前的字体。

于 2013-10-30T10:32:58.083 回答
3

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

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/

于 2013-10-30T10:34:18.233 回答
1

没有办法专门将 CSS 应用于所有数字。在每个数字标签中，您可以添加属性class='number'，然后在 CSS 中添加

.number {
   font-family: arial;
}
于 2013-10-30T10:30:53.343 回答
0

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

以下代码：

$('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>

于 2020-01-21T03:45:22.967 回答
0

有了这个更好

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

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

于 2017-08-10T15:44:28.500 回答