css - without - suavizado de fuentes no aplicado a botones
transform css blurry text (5)
He usado este fragmento de código para evitar que el webkit cambie el suavizado al usar transformaciones CSS:
html{ -webkit-font-smoothing: antialiased; }
Esto funciona bien para la mayoría de los casos, sin embargo, noté algunas rarezas en Chrome al jugar con Bootstrap usando este HTML:
<button class="btn btn-inverse">John Doe</button>
<a class="btn btn-inverse">John Doe</a>
Así es como se ve en OSX / Chrome:
Fiddle: http://jsfiddle.net/hY2J7/ . De hecho, parece que no se aplica a los botones en absoluto. ¿Existe una técnica más segura para activar el mismo antialiasing en webkit para todos los elementos?
¿Has probado esto ya?
-webkit-backface-visibility: hidden;
Lo tengo funcionando en Chrome en OS X en esta actualización de tu jsfiddle
Como el -webkit-font-smoothing no es una propiedad estándar, sus reglas de herencia no están definidas correctamente.
En este caso, para los elementos de botón, el valor predeterminado para -webkit-font-smoothing es ''auto'' no ''heredado''.
Puedes resolver esto agregando esta regla css:
button {
-webkit-font-smoothing: inherit;
}
Ahora, el elemento de botón debería heredar los valores que lo configuró.
También es posible que desee ejecutar otras pruebas para ver si algún otro elemento también muestra el mismo comportamiento.
Existe una propiedad llamada webkit-font-smoothing que puede tomar el valor ''antialiasing'' , pero ... no le ayudará a corregir el suavizado de fuentes. Si bien debería funcionar en Macintosh , no funcionará en máquinas Windows. El navegador anulará la configuración de la propiedad con su propia configuración.
Entonces, ¿hay alguna manera de solucionar este problema? Hay un truco que puede hacer que las fuentes sean más suaves. Encontrará la solución en el contenido adicional de este artículo. (Ese enlace del artículo: http://kazymjir.com/blog/chrome-font-smoothing-antialiasing-fix/ )
Este problema se puede solucionar fácilmente usando la propiedad CSS3 de text-shadow, lo que creará un efecto que podemos llamar "antialiasing falso" .
Espero que esto pueda ayudarte a resolver tu problema.
prueba este código:
.btn{
text-shadow: 0 0.3px 2px rgba(255,255,255, 0.9);
}
En
Tu respuesta es:
* {-webkit-font-smoothing: antialiased;}