CSS: ¿usando diferentes fuentes dentro de un tipo de letra?

Después de explorar más la tipografía, aprendí la diferencia entre un tipo de letra y una fuente :)

Me gustaría saber cómo puedo llamar a las fuentes 'Arial Black' o 'Arial Narrow' dentro de CSS. La configuración de la familia de fuentes no lo hace. ¿Para esto es la configuración de peso de fuente?

Respuestas (3)

Al menos en lo que respecta a CSS, estas son familias de fuentes diferentes.

Tenga en cuenta que si el nombre de la fuente incluye espacios, debe envolverlo entre comillas:

font-family: Arial;
font-family: "Arial Black";
font-family: "Arial Narrow";

Puede elegir las fuentes en negrita o cursiva en una familia como esta:

font-family: Arial;
font-weight: bold;
font-style: italic;

Si una familia no contiene fuentes en negrita/cursiva/negrita-cursiva, se simularán distorsionando la fuente base. Esto debe evitarse, ya que generalmente no se ve bien.

Sí. Lamentablemente, el W3C no estaba a la altura de la tipografía cuando estas cosas se incorporaron en CSS, por lo que es una situación incómoda.
Sin embargo, la representación del navegador de diferentes estilos está mejorando con el tiempo. Eventualmente, podremos cargar 1 archivo de fuente y usar la representación integrada del navegador para las otras fuentes, lo que puede ahorrar tiempo de carga.

Puede poner "Arial Black" o "Arial Narrow" en su pila de fuentes (colóquelas al frente si quiere que sean las predeterminadas), pero si el usuario no las tiene instaladas, su navegador las sustituirá por la primera fuente que tenga. instalado.

Puede forzar la fuente en los usuarios que usan @font-face, pero eso requiere algo de configuración. Un buen lugar para leer sobre cómo hacerlo es http://www.fontsquirrel.com .

La propiedad font-family especifica la fuente de un elemento. También requiere que la fuente esté instalada en el sistema operativo de los usuarios finales. Esta es la razón por la que las pilas de fuentes se usan con múltiples respaldos hasta serify sans-serif. font-style especifica el estilo de la fuente, como cursiva u oblicua. font-weight especifica el peso en negrita, normal, más ligero, más pesado o se puede expresar en valor numérico.

body {
font-family: helvetica, arial, sans-serif;
font-weight: bold;
font-style: italic;
}