
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 lasfont-style
subpropiedadesfont-weight
,font-size
yline-height
. - La página de propiedades
color
que establece el valor de color de los elementos.
- Propiedades float en CSS
- Propiedad clear en CSS
- Introducción al Lenguaje de Programación CSS
- Diferencias entre SASS y SCSS
- Características z-index en CSS
- Características width en CSS
- Características visibility en CSS
- Características top en CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características right en CSS
- Características position en CSS
- Características padding-top en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características padding en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow-wrap en CSS
- Características overflow en CSS
- Características order en CSS
- Características min-width en CSS
- Características min-height en CSS
- Características max-width en CSS
- Características max-height en CSS
- Características margin-top en CSS
- Características margin-right en CSS
- Características margin-left en CSS
- Características margin-bottom en CSS
- Características line-height en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características left en CSS
- Características justify-content en CSS
- Características height en CSS
- Características font-weight en CSS