EM per altezza linea

Question

Mi piacerebbe convertire il mio nuovo sito web da pixel a ems. La mia domanda è, dovrei applicare anche ems alla mia proprietà line-height del testo?

Answer 1

Supponendo che "convertire in ems" significa utilizzare l'unità em per font-size, quindi è necessario impostare line-height in un modo che si adatti anche alle dimensioni del carattere. Le due proprietà sono strettamente correlate e se ne imposti una in em e l'altra (ad esempio) in px o pt, la pagina si interromperà se la dimensione del carattere viene modificata. Quindi sarebbe contrario all'idea stessa di "usare em" per usare unità essenzialmente diverse per proprietà essenzialmente connesse.

Ad esempio, se si imposta font-size: 1.5em e line-height: 18px, le cose dipenderanno dalla dimensione del font dell'elemento padre e potrebbero andare molto male se tale dimensione è molto più piccola o molto più grande del previsto.

Se si utilizza l'unità em o un numero puro è un altro problema. L'utilizzo di un numero, come in line-height: 1.2, equivale principalmente all'utilizzo dell'unità em, come in line-height: 1.2em. Ma c'è la differenza che quando si eredita lo line-height, è il numero puro ad essere ereditato, non il valore calcolato.

Ad esempio, se un elemento interno ha il doppio della dimensione del carattere del suo genitore, il valore ereditato 1.2 significa che 1,2 volte viene utilizzata la propria dimensione carattere, che è OK. Ma se il genitore aveva line-height: 1.2em, il figlio erediterebbe un valore che 1.2 volte la dimensione del carattere del genitore - che è molto più piccola della sua stessa dimensione del carattere.

per ulteriori esempi di fascia cfr line-height @ Mozilla Developer Network

Answer 2

si può provare line-height:1.3 !important;

Answer 3

line-height può essere impostato in px, em 's, ogni unità si adatta.

line-height funziona meglio e a prova di futuro se si utilizza un fattore/moltiplicatore, ovvero nessuna unità, ma solo un numero che sta moltiplicando la dimensione del carattere.

.foo { 
    font-size: 1.3em; /* based that 1em == 10px */ 
    line-height: 1.3; /* 16.9px line-height */ 
} 

Quindi, sì, è possibile, per rispondere alla domanda: no non si dovrebbe.

basta andare per l'altezza della linea basata sui fattori per essere a prova di futuro.

Answer 4

Si raccomanda di utilizzare il numero senza unità per la line-height (per evitare problemi di successione). L'altezza della linea calcolata sarà quindi il prodotto del valore senza unità moltiplicato per la dimensione del carattere dell'elemento.

Può essere conveniente utilizzare il collegamento font CSS, in questo modo (esempio tratto dalla documentazione Mozilla CSS):

div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } 

Un buon esempio del perché il valore senza unità è preferibile qui viene proposta: Prefer unitless numbers for line-height values .