Impostare un carattere specifico per tutti i numeri nella pagina

Question

Per la mia pagina Web, ho scelto un carattere che funzioni bene per tutte le lettere. Tuttavia, per tutti i numeri mi piacerebbe usare un font diverso.

C'è un modo per impostare una regola CSS per indirizzare tutti i numeri sulla pagina?

Se non riesco a farlo rigorosamente con i CSS, il mio primo pensiero è di usare le espressioni regolari per circondare tutti i numeri con un intervallo con una classe "numeri" e applicare un font per quella classe. C'è un modo migliore per farlo?

Answer 1

si può fare in JavaScript relativamente semplicemente passando il documento in modo che si avvolge una sequenza di cifre in un elemento span con un attributo class e dichiarare font-family per essa in CSS.

E 'possibile in linea di principio in puro CSS, troppo, anche se solo i browser WebKit supportano questo:

@font-face { 
    font-family: myArial; 
    src: local("Courier New"); 
    unicode-range: U+30-39; 
} 
@font-face { 
    font-family: myArial; 
    src: local("Arial"); 
    unicode-range: U+0-2f, U+40-10FFFF; 
} 
body { font-family: myArial; } 

Infine, e soprattutto, non farlo. Se non sei soddisfatto con le cifre in un font, non usare quel font.

Answer 2

Circondare i numeri con un <span class="number"> suona come un buon approccio semantico.

In effetti, CSS3 non offre un'alternativa e non vedo nulla di simile a CSS4. Se guardi allo latest CSS3 recommendation, non specifica alcun selettore di contenuti, ma il vecchio 2001 candidate recommendation era l'ultima versione per fornire la pseudoclass :contains().

Questo avrebbe permesso di abbinare un elemento che conteneva i numeri:

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

Anche se ciò fosse realmente disponibile, che corrisponda alla p, non il numero, così l'intero p sarebbe stile ... non quello volevi. Il CSSWG sta dando il via allo these ideas per la formattazione del contenuto numerico ... non è ancora quello che volevi.

Per applicare CSS ai numeri, non è possibile evitare ulteriori markup.