How to apply css to only numbers in a text inside/or any <p><p> element?

问题

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

回答1:

This can be done using CSS's unicode-range property which exists within @font-face.

The numbers 0 to 9 exist in Unicode within the range U+0030 to U+0039. So what you'll need to do is include a font alongside your existing font which specifically targets this range:

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

The result of this will be that every instance of Unicode characters U+0030 (0) through to U+0039 (9) will be displayed in the font which specifically targets that range, and every other character will be in your current font.

回答2:

There is no way to apply CSS to all numbers specifically. In each number tag you could add the attribute class='number' and then in the CSS you could add

.number {
   font-family: arial;
}

回答3:

You can wrap all numbers in p tags with a <span class="number">:

CSS

.number {
   font-family: Verdana;
}

jQuery

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

But personally, I would go with James suggestion ;)

http://jsfiddle.net/ZzBN9/

回答4:

Better with this

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

With + you avoid one span per complete number (span for 321), not one per each number found (span for 3 for 2 and for 1)

来源：https://stackoverflow.com/questions/19679719/how-to-apply-css-to-only-numbers-in-a-text-inside-or-any-pp-element