2012-01-04 2 views
9

Il W3C mantenere un page of advice on how to size your fonts in CSS - ultimo aggiornamento nel mese di aprile 2010. Secondo questa pagina il modo migliore per lo stile font è quello di utilizzare gli "assoluti" font-dimensioni:Devo usare le dimensioni dei caratteri assoluti (piccolo, medio, grande e altro)?

ancora meglio, se un font-di base la dimensione è impostata per il documento, utilizzare la dimensione assoluta ([xx-small | x-small | small | medium | large | x-large | xx-large]) o la dimensione relativa ([più grande | più piccola]) quando si definiscono le dimensioni del carattere per un particolare elemento all'interno del documento.

Le specifiche quindi defines these font-sizes in una tabella. Per quanto ho capito questa tabella, small dovrebbe essere 2/3 (66%) la dimensione di medium e large dovrebbe essere 4/3 (133%).

Se eseguo il test, ricevo rather different results dalla mia interpretazione dei rapporti specificati dal W3C. I risultati sono coerenti tra le ultime versioni di Chrome, Firefox e IE, ma non corrispondono al consiglio del W3C. small è 81.25% anziché 66% e large è 112.5% anziché 133%.

Ciò significa che i browser moderni non supportano questi standard dal W3C? C'è un nuovo standard che ha sostituito quello di cui non sono a conoscenza? O ho frainteso il significato di quel tavolo dal W3C?

Alla fine della giornata la mia domanda si riduce a: è ancora la prassi migliore per utilizzare le dimensioni del carattere assoluto in CSS? Si comporterà in modo coerente attraverso i browser? E idealmente vorrei sapere quale standard i browser moderni stanno seguendo.

+1

Credo che il modo migliore per utilizzare le dimensioni dei caratteri relative: 'em' e percentuali. Nota che html anche come tag che rende tutto un po 'più confuso, l'unico vantaggio secondo la specifica html5 è che questo potrebbe essere utile semanticamente. Ma mi chiedo che cosa devono stare gli altri riguardo agli stili css x-large! – c4urself

risposta

4

Interpretazione errata della tabella a cui ci si collega. Media è la dimensione del carattere HTML 3, piccola è la dimensione del carattere HTML 2, che fa riferimento al tag del font deprecato e alle sue dimensioni del carattere 1..7.

In ogni caso, se si desidera rispettare le preferenze relative alle dimensioni del carattere dell'utente, non utilizzare dimensioni dei caratteri come 10px e simili. Mezzo indica la preferenza dell'utente. (Anche se la stragrande maggioranza degli utenti lasciano il loro dimensione preferita sul default di fabbrica, perché non sanno come cambiarlo.)

@MrLister detto nei commenti:

[rapporto tra le dimensioni dei caratteri assoluti ] differisce tra i browser ... Secondo il W3C, potrebbe anche differire tra i caratteri. Nella mia esperienza personale, in alcuni browser esiste anche una differenza tra modalità strict e quirks. Quindi se vuoi la coerenza, non usarla. Stabilire una dimensione per il corpo (o la dimensione desiderata o lasciare all'utente) e quindi lavorare con percentuali o em per i vari elementi

+0

E infatti oltre alla errata interpretazione della tabella quella pagina specifica che la tabella viene calcolata in modo diverso da UA diversi e anche per caratteri diversi ... – Chris

+0

Ah bene! Sì, non ho potuto capire cosa intendesse per "dimensioni dei caratteri HTML". Sono definiti da qualche parte? O se non lo sono, e in particolare lasciato alla UA (come sottolinea @Chris) c'è una tabella affidabile di default del browser? Solo perché se ho bisogno di codificare alcuni CSS basati su una guida di stile o su un PNG di progettazione, ho bisogno di sapere di quali dimensioni ho a che fare. –

+0

Solo per aggiungere - ho capito che è probabile che cambino, e quindi se voglio specifiche dimensioni pixel dei font non dovrei fare affidamento su 'small',' medium' ecc. Ma vorrei codificare secondo le migliori pratiche (e tale che le dimensioni dei caratteri potrebbero cambiare e il sito sia ancora utilizzabile), ma hanno comunque l'aspetto delle parti interessate come il design specificato. –

0

"Medio" si traduce in 1em.

Come dimensione del carattere di base per un documento, 1em (o 100%) equivale a impostare la dimensione del carattere in base alle preferenze dell'utente.

+6

No no no, 1em non è la stessa media. 1em significa "la stessa dimensione del carattere del genitore". Se non ha una dimensione font specificata, THEN 1em è uguale a medium nel corpo. In un h1, per esempio, 1em significa la stessa dimensione di h1, mentre medium sarebbe la preferenza di default dell'utente. –

+0

Penso che tu abbia frainteso la mia domanda. Questo fatto particolare, sebbene di solito vero, non era il punto. –

+0

"È ancora buona norma utilizzare le dimensioni assolute dei caratteri nei CSS?" - assoluto come in "10pt" o assoluto come in "small" ("small" che si riferisce ai valori del tag 'font' per dimensioni). Quello che stavo cercando di dire è che l'ex "dimensione del tag" font "tag" si tradurrà in dimensione del carattere di base 1em, cioè è destinato ad essere specifico per il browser, ma dovrebbe essere considerato come "medio". Per quanto riguarda la migliore pratica, definire il tuo carattere di base come 1em e differire da quello per tutti gli altri elementi sarebbe il mio voto personale - non so se ti piacerebbe chiamarlo "assoluto" o "relativo" allora. – kontur