Fuente - Trucos CSS

Tabla de contenido

La fontpropiedad en CSS es una propiedad abreviada que combina todas las siguientes subpropiedades en una sola declaración.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Hay siete fontsubpropiedades, que incluyen:

font-stretch: esta propiedad establece el ancho de la fuente, como condensada o expandida.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: hace que el texto aparezca en cursiva u oblicuo.
- normal
- italic
- oblique
- inherit
font-variant: cambia el texto de destino a versalitas.
- normal
- small-caps
- inherit
font-weight: establece el peso o el grosor de la fuente.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: establece la altura de la fuente.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: define la cantidad de espacio por encima y por debajo de los elementos en línea.
- normal
- number (font-size multiplier)
- percentage
font-family: define la fuente que se aplica al elemento.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Problemas de taquigrafía de fuentes

La fontpropiedad no es tan sencilla como otras propiedades abreviadas, en parte debido a los requisitos de sintaxis de la misma y en parte debido a problemas de herencia.

A continuación, se muestra un resumen de algunas de las cosas que debe saber al utilizar esta propiedad abreviada.

Valores obligatorios

Dos de los valores fonttaquigráficos son obligatorios: font-sizey font-family. Si no se incluye alguno de estos, se ignorará toda la declaración.

Además, font-familydebe declararse el último de todos los valores, de lo contrario, nuevamente, se ignorará toda la declaración.

Valores opcionales

Los otros cinco valores son opcionales. Si incluye alguno de font-style, font-varianty font-weight, deben ir antes font-sizeen la declaración. Si no lo son, se ignorarán y también pueden hacer que se ignoren los valores obligatorios.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

En el ejemplo anterior, se incluyen tres opcionales. Siempre que estén definidos antes font-size, se pueden colocar en cualquier orden.

La inclusión line-heighttambién es opcional, pero solo se puede declarar después font-sizey solo después de una barra diagonal:

body ( font: 44px/20px Georgia, sans-serif; )

En el ejemplo anterior, el line-heightes "20px". Si omite line-height, también debe omitir la barra; de lo contrario, se ignorará toda la línea.

Usando font-stretch

La font-stretchpropiedad es nueva en CSS3 por lo que si se utiliza en un navegador más antiguo que no es compatible font-stretchen fontforma abreviada, hará que toda la línea para ser ignorada.

La especificación recomienda incluir un respaldo sin font-stretch, como este:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Herencia para opcionales

Si omite cualquiera de los valores ópticos (incluido line-height), los opcionales omitidos no heredarán valores de su elemento principal, como suele ser el caso de las propiedades tipográficas. En cambio, se restablecerán a su estado inicial.

Por ejemplo:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

En este caso, los valores opcionales (cursiva, minúscula y negrita) se colocan en la fontdeclaración del elemento. Estos también se aplicarán a la mayoría de los elementos secundarios.

Sin embargo, debido a que hemos vuelto a declarar la fontpropiedad en los elementos del párrafo, todos los opcionales se restablecerán en los párrafos, lo que provocará que el estilo, la variante, el peso y la altura de línea vuelvan a sus valores iniciales.

Palabras clave para definir fuentes del sistema

Además de la sintaxis anterior, la fontpropiedad también permite el uso de palabras clave como valores. Son:

caption
icon
menu
message-box
small-caption
status-bar

Estos valores de palabras clave establecen la fuente en la que se usa en el sistema operativo del usuario para esa categoría en particular. Por ejemplo, la definición de "título" establecerá la fuente en ese elemento para usar la misma fuente que se usa en el sistema operativo para los controles con subtítulos (botones, menús desplegables, etc.).

Una sola palabra clave comprende todo el valor:

body ( font: menu; )

Las otras propiedades mencionadas anteriormente no son válidas junto con estas palabras clave. Estas palabras clave solo se pueden utilizar con fonttaquigrafía y no se pueden declarar mediante ninguna de las propiedades individuales de taquigrafía.

Más información

Especificaciones W3C
Artículo de CSS-Tricks: px - em -% - pt - palabra clave
Jonathan Snook: tamaño de fuente con rem
Introducción a la propiedad abreviada de fuentes CSS
Hoja de referencia de propiedades abreviadas de fuentes CSS

Soporte del navegador

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
Alguna	Alguna	Alguna	Alguna	Alguna	Alguna	Alguna