html - div - Peso de fuente ignorado en Chrome
title html css (5)
Agrega esto a tu CSS:
* {-webkit-font-smoothing: antialiased;}
fiddle un fiddle tratando de usar la fuente Open Sans con 300 de peso de fuente:
HTML
<span class="demo">example</span>
CSS
.demo {
font-weight: 400 !important;
font-family: ''Open Sans'' !important;
font-style: normal;
font-variant: normal;
}
Yo uso las fuentes de Google para definir el CSS
Puedo ver una diferencia en Firefox (Ubuntu 13.10) cuando se procesa en font-weight: 300 (light) y en font-weight: 400 (normal) pero ninguna en Chrome (versión 33.0.1750.117), donde todo parece que está renderizado en Peso de la fuente: 400. ¿Estoy haciendo algo mal o hay un error en Chrome? ¿Hay alguna solución conocida?
Actualización :
Definitivamente hay algo mal con Chrome. Tengo dos instancias de la misma página abiertas en 2 ventanas diferentes en Chrome. Uno está procesando la fuente correctamente (300 peso corresponde a la variante de luz) y uno no (300 peso es el mismo que la variante Normal). ¿Alguna pista? Me he asegurado de actualizar la página en cada pestaña para que en realidad sean la misma página.
Actualización 2 : Captura de pantalla adjunta: del error:
Actualización 3 Esto no es un duplicado de this . En esa pregunta, el problema es que "Arial Black" y "Arial" son fuentes diferentes en realidad. En mi caso, Open Sans es la única fuente y el problema es que Chrome retoma el peso incorrecto algunas veces. Como puede ver en las capturas de pantalla, Chrome no es coherente con la fuente renderizada incluso entre dos instancias.
Esto parece ser un error de Chrome / Chromium, causado por tener la fuente instalada localmente en su sistema. Otros navegadores no parecen sufrir este problema.
Hasta ahora, parece ocurrir en Linux y Windows (confirmado).
Por alguna razón, solo cargará su fuente local e ignorará cualquiera de sus reglas de font-weight , incluso si son !important . Ni siquiera será coherente consigo mismo: el peso de la fuente puede cambiar aleatoriamente entre las pestañas y las recargas de página.
La solución más sencilla es eliminar la fuente, pero eso podría ser un problema si lo necesita para otra cosa.
También puede intentar cambiar el nombre de la fuente a otra cosa para forzar a Chrome a usar su fuente web y respetar sus reglas de fuente CSS.
Intente cambiar la familia de fuentes a ''Open Sans Light'', sans-serif; . Tuve el mismo problema y esto me funcionó.
Los superpuse unos encima de otros y se ven bien en osx chrome.
font-weight: 400 !important;
debajo
font-weight: 300 !important;
Mi solución es descargar e instalar todos los tipos de peso de la fuente en su máquina, o no instalarla en absoluto. Es una solución extraña, pero funciona para mí.