2011-10-30 11 views
12

Quali sono i vantaggi degli svantaggi & di ciascuno? em, px, % e pt?La migliore unità per le dimensioni dei caratteri nei CSS

La tua attuale sono percentuali, l'unico motivo è perché posso cambiare globalmente font-dimensioni di tutti gli elementi, semplicemente modificando la dimensione del carattere sull'elemento radice (corpo)

+1

È possibile modificare globalmente 'font-size' con una di queste unità. – yoda

+3

hmm io non la penso così .. – Alex

+1

non esiste una regola del pollice fissa suppongo, io generalmente uso em e% in quanto sono più relativi di px e pt che sono più assoluti e potrebbero non offrire la migliore visualizzazione possibile. Date un'occhiata a questo: http://www.w3.org/Style/Examples/007/units.en.html – Amn

risposta

7

Vorrei raccomandare EM - semplicemente perché uso Baseline CSS per la mia configurazione di base di moduli, layout e, soprattutto, tipo.

non posso raccomandarlo abbastanza: http://baselinecss.com/

+2

forse è cambiato da quando questa risposta è stata pubblicata, ma baselinecss.com utilizza pixel per le dimensioni dei caratteri (nov 2012) –

+1

Sì, sembra che l'autore di Baseline si sia allontanato dall'utilizzo di em, come citato dalla home page di Baseline: "Baseline è costruita con pixel, è quasi impossibile creare una linea di base regolare usando ems a causa dell'arrotondamento dell'unità del browser bug che fanno sì che le baseline di ems si spostino leggermente in modi imprevedibili. " – 10basetom

4

La mia formazione disegno originale ha detto em Ecco dove possibile.

Credo che un motivo principale sia stato il fatto che diversi browser e dispositivi hanno risoluzioni diverse, che stanno diventando nuovamente un grosso problema.

Penso che sia spesso preferibile utilizzare em e% in quanto sono un livello di astrazione in particolare rispetto ai pixel. Entrambi sono simili sotto alcuni aspetti come "100%" = "1em". Un altro problema con l'unità pixel è che non è scalabile verso l'alto per i lettori ipovedenti.
Oggi, per il mobile, il pad, ecc. È spesso meglio avere fogli di stile/regole specifici per ognuno.

Inoltre, per problemi di stampa, funziona bene.

Ho visto una unità chiamata uno standard per le dimensioni dei caratteri sul web, ma l'unità percentuale fornisce spesso una visualizzazione più coerente e accessibile. Quando le impostazioni dell'utente vengono modificate, la percentuale di testo scala bene conservando la leggibilità, l'accessibilità e la progettazione visiva.

3

Uso sempre ems. L'uso di% è lo stesso, ma significano qualcos'altro quando li si utilizza in un'istruzione padding o margin (padding: 1em 0; non è lo stesso di padding: 100% 0;). Quindi basta usare ems I intendi in relazione alla dimensione del carattere corrente ed evitare qualsiasi confusione.

Aggiunto vantaggio o utilizzo di ems è possibile ad es. utilizzare una query multimediale e body{font-size: 120%} per assegnare agli utenti mobili un carattere leggermente più grande.

4

Ecco un link ad uno dei miei articoli preferiti sul corretto dimensionamento del testo con css da alistapart:

http://www.alistapart.com/articles/howtosizetextincss

vista semantico, em è preferito, ma ho sempre trovato problematica perché ha un impatto ogni elemento figlio in modo inclusivo. Se il tuo progetto annida 4 o 5 div e ognuno è a .75 em, prima che tu arrivi all'ultimo div, il tuo testo è quasi illeggibile.

La mia preferenza è pt perché funziona con vari sistemi operativi (permettendo al sistema stesso di decidere cosa sia un pt) piuttosto che usare px che può davvero mettere un pizzico sulla leggibilità di un sito a seconda della risoluzione. Em è considerato lo "standard" per i CSS, ma ha altrettanti problemi degli altri, ma ha il vantaggio di creare una cascata a livello globale.