2013-01-23 15 views
17

Quando si utilizza il testo bianco su sfondo nero, il testo sembra più grasso di quanto dovrebbe sembrare. È puro testo con css. Sto usando il font typekit.org.CSS - testo bianco su sfondo nero, sembra più audace

enter image description here enter image description here

C'è un modo per risolvere questo problema o è qualche tipo di problema di anti-aliasing?

+6

No, questa è un'illusione ottica, aprila in Photoshop e inverti i colori, sembra la stessa. –

+3

@BenjaminGruenbaum - L'ho appena fatto, e non sembra lo stesso. – Philip

+0

forse non ho l'occhio di un artista, perché sembra uguale a me:/ –

risposta

28

Il testo è in grassetto a causa dell'algoritmo anti-alias utilizzato nel browser. È facile da verificare Porta gli screengrabs in IE, Safari, Firefox e Chrome. Hanno tutti anti-alias in modo diverso. Alcuni rendono il testo più spesso di altri. Generalmente il testo migliore sembra bianco su nero, il più grasso sembra invertito.

C'è una spiegazione completa qui: http://www.lighterra.com/articles/macosxtextaabug/

Questo si spegne l'anti-aliasing in maggior parte dei browser:

body { 
-webkit-font-smoothing: antialiased; 
-moz-font-smoothing: antialiased; 
-o-font-smoothing: antialiased; 
} 
+4

Sì, funziona - È davvero fastidioso quando le persone cercano di affermare che si tratta di un'illusione ottica quando chiaramente non lo è! – advert2013

+1

Penso che la versione moz dovrebbe essere -moz-osx-font-smoothing: in scala di grigi Vedi [questa risposta] (http://stackoverflow.com/a/17927764/896907) – josef

+0

Hmm, ottengo ancora i rendering di caratteri più spessi su chrome/finestre con testo bianco. –

-3

Penso che sia un'illusione ottica, il css è definito da te, se non hai messo una regola che rende il testo in grassetto nel css, allora non può essere in grassetto.

+0

Suppongo di sì, irritante. – Philip

+4

Commentando il mio downvote perché SO lo suggerisce: no, non è un'illusione ottica. Nessuna tecnologia nello sviluppo front-end viene tagliata e asciugata in questo modo. Tutto, dall'API DOM all'estetica CSS, è soggetto alla diversa implementazione di ciascun browser e tali variazioni possono essere molto problematiche per alcuni di noi. –

+5

Non un'illusione, ma un vero bug. –

7

In realtà, si tratta di un knownbug:

ero in grado di risolvere il problema utilizzando:

-webkit-font-smoothing:antialiased 

Origine: this article (cached on archive.org).

Un po 'in ritardo, ma potrebbe essere ancora utile per alcuni.

Basta ricordare this is not recommended. A meno che tu non sia su MacOS e utilizzi testo chiaro su sfondo scuro.

+1

Il link era inattivo. Specchio qui: https://web.archive.org/web/20131019233655/http://tanookilabs.com/your-fonts-look-bad-in-chrome-heres-the-fix – geon

+0

Due problemi archiviati e 5 anni dopo l'ultimo Chrome rende ancora il testo chiaro su sfondo scuro in modo totalmente disgustoso su MacOS. Questo fa schifo tanto ... –