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

R. Oosterholt
  • 7,720
  • 2
  • 53
  • 77
Sinju Angajan
  • 833
  • 2
  • 10
  • 20
  • Can you please provide your code or show the demo using fiddle.net – Krish R Oct 30 '13 at 10:31
  • You cannot apply a css to text nodes, so you will have to wrap the number in some elements like span to style it – Arun P Johny Oct 30 '13 at 10:31
  • If some (important) characters do not look good in the font you have chosen, you should first look for a better font, secondly try and find a more suitable font, and thirdly ask (somewhere, not at SO) for help in finding an adequate font. – Jukka K. Korpela Oct 30 '13 at 10:51
  • @JukkaK.Korpela.. I have only 2 options for font-face selection which support all browsers including ie (Local Language) so there is no other alternatives. – Sinju Angajan Oct 30 '13 at 10:55

5 Answers5

27

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.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • This is a very nice solution but you might want to implement a javascript fallback if browser doesn't support unicode-range... As far as I know its a pretty new specification. – MeiSign Oct 30 '13 at 10:36
  • 1
    [`unicode-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range) isn’t supported by Firefox or by IE versions up to IE 8. – Jukka K. Korpela Oct 30 '13 at 10:47
  • Depending on what “number” means, you might need to add “.”, “,”, “’”, “-”, “−”, “+”, etc., and then you would have problems, since they may appear outside numbers, too. The rule given is as such OK for unsigned integers (digit sequences). – Jukka K. Korpela Oct 30 '13 at 10:49
  • @JukkaK.Korpela..Ok..Thank you..Let me try..(Y) – Sinju Angajan Oct 30 '13 at 10:51
  • Would it be possible to give a working demo of this? e.g. http://jsfiddle.net/geotheory/e0owrwne/ – geotheory Aug 19 '15 at 18:24
  • @geotheory see my answer for more clarification http://stackoverflow.com/a/40088765/842386 – vinesh Oct 17 '16 at 14:15
  • This code worked for me, Thanks – Pourdad.Daneshmand Feb 01 '22 at 07:49
  • Incredible. For anyone wondering how to make your project recognize these two fonts, you gotta do something like `font-family: "My Pre-Existing Font", "My New Font Which Handles Numbers Correctly";` – NetOperator Wibby Sep 11 '22 at 19:16
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/

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Johan
  • 35,120
  • 54
  • 178
  • 293
  • 4
    I know it's late, but what about `return v.replace(/(\d+)/g, etc...` ? That groups `12` and `1234` together into one span, instead of putting a span on each digit. – Rudy Velthuis Mar 14 '16 at 00:58
0

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;
}
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
LondonAppDev
  • 8,501
  • 8
  • 60
  • 87
0

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)

Pablo Poveda
  • 1
0

You can use the regex replace and detect the numbers then add the class

following code:

$('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>
Basil
  • 1,613
  • 12
  • 25