Tecniche di caratteri smussati? text-shadow di rendering in modo diverso in Chrome 14.0.833.0 o superiore

Question

EDIT:

Siamo in Chrome 19 ora, e questo ancora non è fisso. Solo una precisazione: questo accade in Chrome su Windows, non Linux o Mac. Io penso che abbia a che fare con ClearType. Google, risolvere questo problema.

Sto usando CSS3 text-shadow di emulare arrotondamento dei font di IE9 su altri browser. Fondamentalmente ho appena impostato il text-shadow del testo di un contenitore per lo sfondo del contenitore. Si può vedere il comportamento impostando text-shadow su un elemento di carattere era relativamente ampia in nulla inferiore a Chrome 14.0.833. Gli sguardi di testo liscia. Rimuovere il text-shadow e gli sguardi dei caratteri frastagliati. Tuttavia, in Chrome 14.0.833 (UPDATE: sembra è anche "rotto" in 14.0.834) questo non funziona più. La proprietà text-shadow funziona ancora, ma non nel modo in cui ha fatto prima. È possibile vedere il comportamento qui (basta caricare con diff. Versioni Chrome) Sembra come se nel vecchio Chromes l'ombra del testo ha cominciato all'interno del testo solo un po 'e poi diffuso - che è forse il motivo per l'hack text-shadow ha funzionato. Nella più recente Chrome, appare l'ombra di testo inizia proprio fuori il testo, è per questo che non funzionerà. Vedere quello che voglio dire qui .

La mia domanda è fondamentalmente: questo è un bug? Quale è il comportamento previsto, se uno dei due? Ci sono altre soluzioni alternative smussatura dei caratteri è possibile utilizzare?

spec W3C non sembrava dire ciò che il destinato comportamento è, anche se ho visto che forse dovrei usare text-outline (che è un pò non supportato, che sconfigge lo scopo)

Answer 1

Beh, ho capito, sorta. Fastidioso da quando ho messo una taglia, ma qualunque cosa. Sono abbastanza certo questo non è un bug e ci si aspetta un comportamento - soprattutto perché abbiamo visto un paio di iterazioni di Chrome e che sia rimasto lo stesso. Alcuni metodi diversi di lavoro. Ho scritto un po 'per il mio blog, è possibile vedere l'articolo completo qui , ma ecco la maggior parte di esso :

Per prima cosa, ho provato la -webkit-text-stroke:1px #000 dove #000 è il colore del testo. Ma questo stile è inteso per l'uso in cui il colore di il testo è diverso dal colpo, per una bella text-contorno. quando entrambi sono dello stesso colore, sembra ... strano. Io non so perché; io no esperto font-rendering. È possibile vedere il comportamento nella foto dopo l'articolo.

Poi ho provato un semplice text-shadow:#000 0 0 1px dove #000 è lo stesso colore del testo. A causa lo stesso problema Chrome 14.0.833+, questo lascia ancora il tipo di carattere che guarda un po 'frastagliata. E 'meglio che testo semplice, tuttavia.

Poi ho provato un combinato i due tentativi di cui sopra. Questo sembra un po ' morse meglio, ma bulks il testo come aggiunge essenzialmente 2 pixel alla thinkness del testo.

Infine, ho provato l'applicazione di due di testo ombre: text-shadow:#000 0 1px 1px,#000 0 -1px 1px>> dove #000 è il colore del testo. Quello che fa è applicare due ombre testo, uno dei quali è spinto verso il basso un po 'e la altro spinto verso l'alto. In questo modo, l'ombra testo copre i bordi frastagliati. esso rinfuse il testo un po 'ma sicuramente leviga fuori.

A seconda delle dimensioni del testo, diversi metodi di lavoro. Più piccola (Ma ancora frastagliata) testo potrebbe utilizzare il text-shadow, testo più grande potrebbe utilizzare il metodo ombra / ictus, e molto grande testo potrebbe usare la Metodo dual-ombra. Naturalmente il più grande è il testo meno evidente i pochi pixel in più diventano. È possibile vedere tutti i diversi metodi qui

Answer 2

Va bene, ho trascorrere un po 'di tempo su questo e questo è ciò che si tratta di:. Si tratta di un bug

Prima di tutto, -webkit-font-smoothing:antialiased; funziona solo per Mac, non di Windows.

Sono in Windows7, ho creato un'immagine Pixlr stratificata con schermate di un JSfiddle ho realizzato che aveva 4 elementi diversi con differenti text-shadow applicata a ciascuno. Si può chiaramente vedere che text-shadow è cambiato da Chrome13 e Chrome 14.0.835. Ho dovuto passare tra la Beta e Dev Channel un paio di volte perché ho incasinato, disinstallazione, ecc ugh.

Scarica il file immagine Pixlr strati che ho fatto da:

http://dl.dropbox.com/u/7353877/Chrome -text-shadow-V13-v14_0_835.pxd

Poi vai a http://pixlr.com/editor/ e scegliere di aprire il file dal computer, aprire il file. Ora, in Pixlr, lo zoom per le quattro righe di testo, nel pannello Livelli sul livello superiore fare clic sulla casella di controllo e deselezionare, quindi controllare di nuovo, farlo più e più volte e vedere come drastico cambiamento di text-shadow è.

Questo dovrebbe essere presentato come un bug. Una schiena link per questa pagina potrebbe essere utilizzato per mostrare l'effetto, se necessario.

JSfiddle (Il JSfiddle ho usato negli screenshots) http://jsfiddle.net/nicktheandroid/Xkp9q/

ho messo un pezzo di torta nel forno a microonde un'ora e mezzo fa .... fa freddo: (

Answer 3

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

o

text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px;

Testato e funziona bene in diverse versioni di Opera, Chrome, Safari e Firefox.

Answer 4

-webkit-font-smoothing:antialiased; 

lavoro potrebbe per voi

Answer 5

YES! Ho trovato una soluzione per questo problema. E 'strano, ma funziona per me.

Quindi, per farlo funzionare, ha messo questo stile sull'elemento che si desidera lisciare:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

Ho messo un HTML di esempio il file proprio con questo stile così si può rapidamente testare.

Answer 6

Questo è stato davvero come un sacco di webfonts (Google webfonts e anche i font altamente professionali da Typekit ecc) sembrava in Firefox (a sinistra) e Google Chrome (a destra) su sistemi Windows (ed eventualmente anche altrove). Nessun scherzo! Per chiarire questo: l'unico browser che completamente incasinato Google webfonts era browser di Google Chrome. Come malato è quello? Nel 2013 è passato browser Opera è motore di rendering di WebKit (= il motore in Chrome lacerante), quindi questo problema esiste in Opera troppo.

di più: http: //www.dev-metal .com / fix-brutto-font-resa-google-chrome /