Características font-family en CSS

La propiedad font-family CSS define una lista de uno o más tipos de fuentes públicas o privadas que se aplicarán al elemento.

Funciones font-family css

Valor inicial	Varía según el navegador.
Aplicado a	Todos los artículos.
Heredable	Sí
Móvil	No
Valor calculado	Como se especificó.

/* tipo de fuente privada, luego tipo de fuente global */ 
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
/* solo tipos de fuente genéricos */ 
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
/* valores globales */ 
font-family: inherit;
font-family: initial;
font-family: unset;

Los valores de esta propiedad están separados por comas para indicar que son alternativas, por lo que el navegador elegirá la primera fuente de la lista que está instalada en el sistema operativo del visitante o se puede descargar usando la regla @ font-face .

En la mayoría de los casos, es apropiado utilizar la propiedad de acceso directo font para establecer el valor de la propiedad font-family y otros atributos relacionados con las fuentes.

Se recomienda que proporcione un tipo de fuente genérico en la lista de fuentes configuradas con esta función, porque no hay garantía de que una fuente siempre estará disponible en las computadoras de los clientes, por lo que el navegador debe dejarse abierto para elegir una fuente alternativa cuando necesario.

Tenga en cuenta que la propiedad font-family especifica una lista de tipos de fuentes y comienza desde la prioridad más alta a la más baja, pero la selección de fuentes no se detiene en la primera fuente de la lista (y, por lo tanto, se aplicará a todos los textos), pero este proceso se hará en cada carácter por separado.

Es decir, si el tipo de fuente no contiene un glifo, el navegador probará las otras fuentes (sólo se usará en glifos latinos y el navegador probará las fuentes siguientes en prioridad para mostrar caracteres). Tenga en cuenta que solo cuando una fuente de cierto tamaño o estilo está disponible, el resto de las propiedades de la fuente pueden afectar el tipo de fuente elegido.

Ejemplos y aplicaciones en código

Ejemplos de las fuentes más populares en cada categoría de fuente:

.serif {
  font-family: Times, Times New Roman, Georgia, serif;
}
.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.monospace {
  font-family: Lucida Console, Courier, monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	3,0	3,5	1.0
System-ui	56	No soportado	No soportado	43	?

Características general

La propiedad especifica una font-family lista de tipos de fuente que están separados por una coma, y cada fuente es <family-name>(un nombre para un tipo de fuente específico) o <generic-name>(un nombre para un tipo de fuente genérico).

<family-name>

El nombre del tipo de fuente, como «Times» y «Helvetica». Tenga en cuenta que los nombres de los tipos de fuente que contienen espacios deben estar entre comillas (se convertirán en cadenas de texto <string>, pero si no contienen espacios, se pueden contar como tipo de datos <custom-ident>).

<generic-name>

Los tipos de fuente se utilizan como un mecanismo para elegir una alternativa si el tipo de fuente especificado no existe. Los nombres de los tipos de fuente son palabras reservadas que no pueden estar entre comillas. El tipo de contorno debe ser el último elemento en la lista de tipos de fuente utilizados.

serif

Como serifas con pequeñas adiciones al final; las líneas Lucida Bright, Lucida Fax y Palatino.

sans-serif

Fuentes sans-serif sin extras al final; como fuentes Open Sans, Lucida Sans y Liberation Sans.

monospace

Las fuentes monoespaciadas todos los caracteres tienen el mismo ancho. Como las líneas DejaVu Sans Mono, Liberation Mono y Lucida Console.

cursive

Fuentes cuyos personajes tienen lugares para conectarlos con otros personajes, de modo que la escritura parece estar conectada entre sí (como en la escritura a mano). Como Brush Script MT, Lucida Calligraphy y Lucida Handwriting.

fantasy

Las fuentes de fantasía son fuentes decorativas; como las líneas Papyrus, Herculanum y Harrington.

system-ui

Los glifos de caracteres se tomarán de la fuente de interfaz predeterminada en el sistema operativo del visitante.

Tipos de fuentes válidos

Los nombres de los tipos de fuente deben ser cadenas de texto entre comillas o una cadena sin comillas que represente uno o más identificadores. Esto significa que la puntuación y los números al principio de cada identificador deben omitirse si el nombre de la fuente no está entre comillas.

A continuación, se muestra un ejemplo de cómo definir fuentes correctamente:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

Estos ejemplos son incorrectos :

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lidia" Grande, sans-serif;
font-family: Rock!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

Estructura font-family css

font-family: [ <family-name> | <generic-family> ]#;

Los valores se pueden repetir para especificar más de un tipo de fuente, separando los valores con una coma.

<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

Consulte también

La página de propiedades font que establece los valores de las font-style subpropiedades font-weight, font-size y line-height.
La página de propiedades color que establece el valor de color de los elementos.