Dimensione carattere in CSS -% o em?

112

Quando imposto la dimensione dei caratteri in CSS, dovrei usare un valore percentuale ( %) o em? Puoi spiegare il vantaggio?

css fonts font-size

— Mats
fonte

1

Secondo me nel 2016 non c'è differenza tra em e%. Se inserisco 1.2 em tutti i browser moderni pensano di aver usato il 120% e per esempio se uso 0.7 em tutti i browser moderni pensano di aver usato il 70% ... Questo è quello che ho sperimentato in CSS

— Mahdi Jazini

79

C'è un ottimo articolo sulla tipografia web su A List Apart .

La loro conclusione:

È stato dimostrato che il ridimensionamento del testo e l'altezza della riga in ems, con una percentuale specificata sul corpo (e un avvertimento opzionale per Safari 2), fornisce un testo accurato e ridimensionabile su tutti i browser di uso comune oggi. Questa è una tecnica che puoi mettere nella tua borsa del kit e utilizzare come best practice per ridimensionare il testo in CSS che soddisfa sia i designer che i lettori.

— Glenn Slaven
fonte

29

In realtà line-heightssono scritti meglio senza alcuna unità. Ciò è consentito dalle specifiche ed evita completamente alcune stranezze del browser davvero fastidiose quando si tratta di emaltezze di linea basate su

— Már Örlygsson,

16

Voglio che le persone sappiano che questo articolo è del 2007. Da allora i browser moderni sono diventati più comuni ei browser moderni di solito ingrandiscono invece di aumentare la dimensione del carattere come impostazione predefinita. Per questo motivo, "px" è diventato più comune e, a mio parere, un approccio migliore. Ovviamente è discutibile, ma ho riscontrato personalmente problemi nei progetti a causa della loro nidificazione.

— Mohag519

5

@ Mohag519 l'annidamento di em è una trappola pericolosa. :)

— Vishnudev K

@ Mohag519 px non ti darà qualcosa di molto più piccolo di quanto previsto con i dispositivi mobili che hanno un'elevata densità di pixel? Non credo che vogliamo che i nostri siti siano esattamente come desktop ma super piccoli sui dispositivi mobili;)

— johnb003

@ johnb003 Tali dispositivi mobili hanno un rapporto pixel del dispositivo maggiore di 1. Ad esempio, l'iPhone 4 ha una larghezza fisica dello schermo di 640 px, ma appare come 320 pixel "CSS" (DPR = 2). Quindi il sito web non sembra più piccolo!

— Benjamin

14

Da http://archivist.incutio.com/viewlist/css-discuss/1408

%: Alcuni browser non gestiscono la percentuale per la dimensione del carattere ma interpretano il 150% come 150 px. (Alcune versioni di NN4, ad esempio.) IE ha anche problemi con la percentuale sugli elementi nidificati. Sembra che IE utilizzi la percentuale relativa alla visualizzazione invece che relativa all'elemento genitore. Ancora un altro problema (sebbene corretto secondo le specifiche W3C), in Moz / Ns6, non è possibile utilizzare la percentuale relativa agli elementi senza altezza / larghezza specificata.

em: A volte i browser usano la dimensione di riferimento sbagliata, ma delle unità relative è quella con meno problemi. A volte però potresti trovarlo interpretato come px.

pt: differisce notevolmente tra le risoluzioni e non deve essere utilizzato per la visualizzazione. Tuttavia è abbastanza sicuro per la stampa.

px: L'unica unità assoluta affidabile sullo schermo. Tuttavia, potrebbe essere interpretato erroneamente in stampa, poiché un punto di solito è costituito da diversi pixel, e quindi tutto diventa ridicolmente piccolo.

— Galwegian
fonte

Riguardo la cosa del pt. Ho avuto una grande discussione su /. su questo (e perso). Avevo lo stesso punto di vista di te, bello sapere che qualcuno condivide quel punto di vista :)

— Vincent McNabb,

12

Stai davvero dicendo che alcuni utenti di Netscape Navigator 4 potrebbero non essere in grado di visualizzare correttamente la mia pagina se userò le percentuali per le dimensioni dei caratteri?

— principiante

4

La discussione citata è del 2002. È ancora rilevante? Esistono browser attivi con em o% bug?

— Beni Cherniavsky-Paskin

1

Citare bug di 20 anni nei browser non è una risposta utile.

— d512

7

Entrambi regolano la dimensione del carattere rispetto a quello che era. 1.5em è uguale al 150%. L'unico vantaggio sembra essere la leggibilità, scegli quello con cui ti trovi più a tuo agio.

— Liam
fonte

Qualcuno può spiegare al mio perché questo è stato bocciato? Questo è esattamente come ho capito la differenza tra em e percentuale. Al giorno d'oggi non c'è alcun vantaggio nell'usare l'uno sull'altro. La cosa importante è che tu usi una dimensione relativa alla dimensione del carattere di base.

— Lee Theobald,

1

Grazie Lee, l'ho appena provato su IE6, IE7, Firefox 3, Safari 3, Opera 9.5 e Google Chrome, tutti su Windows e mi sembrano tutti uguali! <p style = "font-size: 0.6em;"> questo è un test </p> <p style = "font-size: 60%;"> questo è un test </p>

— Liam,

7

La vera differenza diventa evidente quando non lo usi per le dimensioni dei caratteri. L'impostazione di un paddingdi 1emnon è la stessa di 100%. emè sempre relativo alla dimensione del carattere. Ma %potrebbe essere relativo alla dimensione del carattere, alla larghezza, all'altezza e probabilmente ad altre cose che non conosco.

— Björn Tantau
fonte

5

Dato che (quasi?) Tutti i browser ora ridimensionano la pagina nel suo insieme, piuttosto che solo il testo, i precedenti problemi con pxvs. %vs. ems in termini di ridimensionamento accessibile dei caratteri sono piuttosto discutibili.

Quindi, la risposta è che probabilmente non ha importanza. Usa quello che funziona per te.

% è carino perché consente il ridimensionamento relativo.

px è bello perché è abbastanza facile gestire le aspettative quando lo si utilizza.

em può essere utile quando viene utilizzato anche per gli elementi del layout in quanto può consentire il dimensionamento proporzionale relativo alla dimensione del testo.

— DA.
fonte

Risposta fuorviante, soprattutto per coloro che non sanno molto di CSS in primo luogo. Ignorando il fatto che CSS definisce i pixel logici, che è stata un'idea terribile basata su una decisione senza dubbio frettolosa di adattarsi all'assalto dei dispositivi mobili compatibili con CSS di dieci anni fa, i pixel sono interamente a discrezione dei browser e degli utenti per quanto riguarda la dimensione del carattere predefinita. , almeno. In aggiunta a ciò, ora abbiamo rapporti di aspetto dello schermo ampiamente diversi (e non sempre dispositivi con uno schermo) e risoluzioni che vanno da 240p a 2400p. L'utilizzo di pixel in CSS senza JavaScript è quasi inutile.

— amn

@ benissimo, nota che questa risposta ha 8 anni. È un tempo LUNGO nel tempo di Internet. Detto questo, i pixel vanno ancora bene se non ideali. La maggior parte (tutti?) I browser adattano adeguatamente il dimensionamento dei caratteri pixel sul particolare dispositivo. Oggi, però, di solito uso rem come unità di misura.

— DA.

Forse mi manca qualcosa, ma quale vantaggio se ne ha uno con le lunghezze dei pixel? Perché sono "bene" o "ideali"? Versus em, per esempio. A parte questo, penso che le risposte su SO dovrebbero sforzarsi di essere senza tempo - dopotutto è una base di conoscenza. Wikipedia di programmazione :) Poiché Wikipedia viene aggiornata per riflettere i fatti, così dovrebbe rispondere, a mio modesto parere.

— amn

@amn non ho detto che fossero l'ideale o che avessero un vero vantaggio importante. Stavo solo rispondendo alla domanda dei PO. Per quanto riguarda il tentativo di essere senza tempo, se puoi prevedere il futuro del web tra 8 anni, più potere per te! Ma non ho il tempo di aggiornare costantemente le mie risposte di un decennio qui. Si spera che le persone ne sappiano abbastanza per guardare i timestamp sulle risposte e prenderlo in considerazione.

— DA.

0

Per quanto riguarda la differenza tra le unità CSS %e em.

Per quanto ho capito (almeno teoricamente / concettualmente, ma forse non come queste due unità possono essere implementate nei browser) queste due unità sono equivalenti, vale a dire se si moltiplica il tuo emvalore con 100e poi sostituirlo emcon %esso dovrebbe essere la stessa cosa?

Se esiste effettivamente una vera differenza tra em e%, qualcuno può spiegarlo (o fornire un collegamento a una spiegazione)?

(Volevo aggiungere questo mio commento dove dovrebbe appartenere, cioè rientrato appena sotto la risposta da "Liam, answered Sep 25 '08 at 11:21"dato che voglio anche sapere perché la sua risposta è stata sottovalutata, ma non sono riuscito a capire come inserire il mio commento lì e quindi ho dovuto scrivere questa risposta "thread globale")

— user743436
fonte

-1

Come dice Galwegian, px è il più affidabile per la tipografia web, poiché tutto il resto che fai sulla pagina è per lo più disposto in riferimento al monitor di un computer. Il problema con le dimensioni assolute è che alcuni browser (IE) non ridimensionano gli elementi con valore in pixel su una pagina web, quindi quando provi a ingrandire / ridurre , tutto si regola tranne quegli elementi.

Non so se IE8 lo gestisca correttamente, ma tutti gli altri fornitori di browser gestiscono i pixel bene ed è ancora un caso di minoranza in cui un utente ha bisogno di ingrandire / diminuire il testo (questa casella di testo su SO forse è l'eccezione). Se vuoi sporcarti davvero, puoi sempre aggiungere una funzione javascript per aumentare le dimensioni del testo e offrire un pulsante "piccolo" / "più grande" all'utente.

— Christian P.
fonte

1

IE7 scala bene i valori dei pixel, se usi lo zoom. IE6 non aveva lo zoom, solo la dimensione del testo. Lo zoom è diventato un requisito per i designer che hanno utilizzato scale di pixel fisse invece di consentire alla pagina di scorrere nuovamente con le modifiche alle dimensioni del testo.

— Mike Dimmick

È ancora un problema con IE6, ma, di nuovo, TUTTO è ancora un problema con IE6. Anche se in passato ho evitato px per questo motivo, il concetto di zoom della pagina web nel suo insieme (rispetto al testo) è diventato standard e mi sono ritrovato a usare px molto più spesso.

— DA.

-1

La libreria dell'interfaccia utente di Yahoo ( http://developer.yahoo.com/yui/ ) ha un bel set di classi CSS di base utilizzate per "ripristinare" le impostazioni specifiche del browser in modo che la base per la visualizzazione del sito sia la stessa per tutti (supportato) i browser.

Con YUI si dovrebbero usare le percentuali.

— kosoant
fonte

Ho utilizzato il ripristino YUI, ma poi mi sono reso conto che le impostazioni delle dimensioni del testo del browser NON FUNZIONANO! Non vedere alcun punto nell'usare% se hai px impostato sul corpo poiché interrompe le impostazioni della dimensione del testo.

— Jason