¿Cambiar una fuente "normal" con el peso de la fuente en CSS la hace realmente negrita? (es decir, otro archivo de fuente)

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)

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.

@font-face {
    font-family: 'YourFont';
    src: url('your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFontBold';
    src: url('your_font_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFontItalic';
    src: url('your_font_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Observe que font-weighty font-styleen cada uno se establece en normal y cada uno tiene un font-familynombre único . Esto significa que cualquier vez que se establece una font-weighto font-stylede 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:

strong {
    font-family: 'YourFontBold';
    }

Sin restablecer el valor font-weightnormal, 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 predeterminado stronges font-weight: bold;.

Una mejor manera:

@font-face {
    font-family: 'YourFont';
    src: url('your_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YourFont';
    src: url('your_font_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'YourFont';
    src: url('your_font_italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

Observe la definición font-weighty font-stylecorresponda al archivo de fuente correctamente y todos usan el mismo font-familynombre. Declarar sus fuentes de esta manera significa que puede usar font-weighty font-styleen 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-facedeclaració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-familynombre. Creo que esto también causó problemas en versiones anteriores de iOS

Google 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:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->

Por lo tanto, si desea usar font-weighty font-styleen su CSS sin preocuparse por el nombre de la fuente real, no confíe en los generadores de fuentes web y configure la @font-facedeclaració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 cualquier font-weighty font-styleestilos 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.