Soy desarrollador web y estoy trabajando en un proyecto que utiliza Quicksand Light / Regular / Bold como fuente. La fuente estándar de la aplicación web es Quicksand regular pero también hay texto que es más claro y audaz.
Como desarrollador web, normalmente aplicaría un estilo CSS simple como este:
font-weight: bold; // or 400, 600, 800
¿Es este un truco válido para evitar establecer la fuente en cada elemento que no es "regular"? Si no, ¿hay fuentes que funcionen así? (es decir, modificarlos a través de CSS para obtener una fuente diferente)
website-design
fonts
css
font-weight
dragonmnl
fuente
fuente
Respuestas:
Fuentes web
Hay 2 formas de definir las fuentes web con
@font-face
. El primero, y probablemente el más común (creo que la mayoría de los generadores, Font Squirrel, por ejemplo, generará esto) es definir cada archivo de fuente (es decir, cada peso y estilo) con su propio nombre de familia único.Observe que
font-weight
yfont-style
en cada uno se establece en normal y cada uno tiene unfont-family
nombre único . Esto significa que cualquier vez que se establece unafont-weight
ofont-style
de otra de lo normal que está recibiendo navegador implementa "falso" estilos, nada no los estilos desde el archivo fuente correcta. Esto también puede llevar a "doble" negrita o cursiva si no restablece los estilos CSS predeterminados del navegador a "normal". Por ejemplo:Sin restablecer el valor
font-weight
normal, eso se volverá más audaz de lo que debería ya que el navegador está cargando el archivo de fuente en negrita y agregando su propio estilo de negrita falsa ya que el estilo predeterminadostrong
esfont-weight: bold;
.Una mejor manera:
Observe la definición
font-weight
yfont-style
corresponda al archivo de fuente correctamente y todos usan el mismofont-family
nombre. Declarar sus fuentes de esta manera significa que puede usarfont-weight
yfont-style
en cualquier lugar de su CSS exactamente como lo esperaría y obtendrá la fuente correcta, sin estilos "falsos".Es probable que todos los navegadores entiendan las palabras clave "negrita" y "cursiva", por lo que debe utilizar el número de peso de fuente específico. También tenga en cuenta que los navegadores generalmente no redondean bien los pesos de las fuentes, por lo tanto, especifique el peso que desea exactamente y asegúrese de que coincidan en su
@font-face
declaración y estilos CSS.El problema con este método es que Internet Explorer 8 o inferior no reconoce múltiples estilos y pesos que usan el mismo
font-family
nombre. Creo que esto también causó problemas en versiones anteriores de iOSGoogle Fonts evita esto al servir condicionalmente IE 8 o inferior con solo la fuente normal y dejar que IE "falsifique" los otros estilos. No es ideal.
Este artículo en smashingmagazine.com sugiere agregar condicionalmente los estilos por separado para Internet Explorer, lo que debería solucionar el problema de los pesos y estilos múltiples:
Por lo tanto, si desea usar
font-weight
yfont-style
en su CSS sin preocuparse por el nombre de la fuente real, no confíe en los generadores de fuentes web y configure la@font-face
declaración correctamente usted mismo, y tenga en cuenta que causará problemas en los navegadores más antiguos.Fuentes de escritorio
Al declarar las fuentes que no están incrustadas
@font-face
, solo se usarán las fuentes instaladas en la computadora del usuario. Estos deben respetar cualquierfont-weight
yfont-style
estilos y cargar las fuentes correctas (Todas mis pruebas en Chrome y Firefox en OS X funciona como se esperaba), pero esto puede depender de navegador y sistema operativo, y dependerán de la denominación de las fuentes dentro de los propios ficheros - cosas sobre las que realmente no tienes ningún control.fuente
font-family: YourFontBold; font-weight:normal;
cada vez. Entonces deberías usar el otro método.