Set a font specifically for all numbers on the page

Question

For my webpage, I chose a font that works well for all the letters. However, for all numbers I\'d like to use a different font.

Is there a way that I can set a CSS

Answer 1

Surrounding your numbers with a sounds like a good, semantically sound approach.

In fact, CSS3 doesn't offer an alternative, and I don't see anything forthcoming in CSS4. If you look at the latest CSS3 recommendation, it doesn't specify any content selector, but the old 2001 candidate recommendation was the last version to provide the :contains() pseudoclass.

This would let you match an element that contained numbers:

/* Deprecated CSS3 */
p:contains(0), p:contains("1"), p:contains("2") {
    background-color: red;
}

Even if this were actually available, it matches the p, not the number, so the whole p would be styled...not what you wanted. The CSSWG is kicking around these ideas for formatting numerical content...still not what you wanted.

To apply CSS to the numbers, there is no avoiding some additional markup.