non applicata ai pulsanti

Question

Ho usato questo frammento di codice per impedire webkit di modificare l'antialiasing quando si utilizzano i CSS trasforma:

html{ -webkit-font-smoothing: antialiased; } 

Questo funziona bene per la maggior parte dei casi, però ho notato qualche stranezza in cromo quando si gioca intorno con Bootstrap utilizzando questo codice HTML:

<button class="btn btn-inverse">John Doe</button> 
<a class="btn btn-inverse">John Doe</a>​ 

questo è come appare in OSX/Chrome:

Fiddle: http://jsfiddle.net/hY2J7/. In effetti, sembra che non sia applicato ai pulsanti. Esiste una tecnica più sicura per attivare lo stesso antialiasing nel webkit per tutti gli elementi?

Answer 1

Come il -webkit-font-smoothing non è una proprietà standard, le sue regole di ereditarietà non sono adeguatamente definiti.

In questo caso, per gli elementi del pulsante, il valore predefinito per -webkit-font-smoothing è 'auto' non 'inherit'.

È possibile risolvere questo con l'aggiunta di questa regola css:

button { 
    -webkit-font-smoothing: inherit; 
} 

Ora, l'elemento pulsante dovrebbe ereditare tutto ciò che i valori che hai impostato a.

Si potrebbe anche voler eseguire altri test per verificare se anche altri elementi mostrano lo stesso comportamento.

Answer 2

provare questo codice:

.btn{ 
    text-shadow: 0 0.3px 2px rgba(255,255,255, 0.9); 
}​ 

Answer 3

Your answer è:

* {-webkit-font-smoothing: antialiased;}​ 

Answer 4

C'è una proprietà chiamata webkit-font-smoothing che può assumere il valore ‘antialiasing’, ma ... non vi aiuterà con fissaggio caratteri smussati. Mentre dovrebbe funzionare su Macintosh, non funzionerà su computer Windows. Il browser sostituirà con le impostazioni di proprietà con la propria configurazione.

Quindi, c'è un modo per risolvere questo problema? C'è un trucco che può rendere i caratteri più fluidi. Troverete la soluzione nel ulteriormente il contenuto di questo articolo (Tale articolo Link: http://kazymjir.com/blog/chrome-font-smoothing-antialiasing-fix/).

Questo problema può essere facilmente risolto usando text-shadow proprietà CSS3, che creerà un effetto che possiamo chiamare “ antialiasing falso ".

Spero che questo possa aiutarti a risolvere il problema.

Answer 5

Hai già provato?

-webkit-backface-visibility: hidden;

ce l'ho a lavorare in Chrome su OS X in this update of your jsfiddle