
La propiedad font en CSS es un atajo que permite ajustar los valores de las propiedades font-style
, font-variant
, font-weight
, font-size
, line-height
y font-family
, para determinar la fuente utilizada en el elemento.
Funciones font css
/* size | family */ font: 2em "Open Sans", sans-serif; /* style | size | family */ font: italic 2em "Open Sans", sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; /* style | variant | weight | stretch | size/line-height | family */ font: italic small-caps bolder condensed 16px/3 cursive; /* Fuente utilizada en el sistema operativo */ font : message-box ; font : icono ; /* Valores globales */ font: inherit; font: initial; font: unset;
Al igual que con todas las propiedades de acceso directo, la propiedad font
establece los valores de todas las propiedades que puede establecer, incluso si no especificamos un valor para esas propiedades, porque las establecerá en sus valores iniciales.
Tenga en cuenta que las propiedades font-stretch
, font-size-adjust
y font-kerning
no se establecerán mediante la propiedad abreviada font
, pero harán que sus valores se restablezcan a sus valores iniciales.
Valor inicial | Para cada valor corto:font-style : normal font-variant : normal font-weight : normal font-stretch : normal font-size : medium line-height : normal font-family : depende del navegador. |
---|---|
Aplicado a | Todos los artículos. |
Heredable | Sí |
Móvil | Consulte las páginas de funciones que abrevia esta función. |
Valor calculado | Para cada valor corto: font-style : Como se especificó.font-variant : Como se especificó.font-weight : La palabra reservada o el valor numérico especificado, excepto bolder y lighter si se convierten en valores reales.font-stretch : Como se especificó.font-size : Cómo se especifica, pero con la conversión de longitudes relativas a longitudes absolutas.line-height : Cómo se especifica, excepto para los valores relativos que se convertirán a longitudes absolutas.font-family : Como se especificó. |
Ejemplos y aplicaciones en código
Establezca tamaño de fuente ( font-size
) en 15px
, altura de fuente ( line-height
) en 18px
y tipo de fuente ( font-family
) en sans-serif
:
p { font: 15px/18px sans-serif; }
Establezca el tamaño de fuente ( font-size
) a 80%
partir del tamaño de fuente del elemento principal (o el valor predeterminado si no hay ningún elemento principal), y establezca el tipo de fuente ( font-family
) a sans-serif
:
p { font: 80% sans-serif; }
Establezca peso de fuente ( font-weight
) en bold
(Negrita), formato de fuente ( font-style
) en italic
(Cursiva), tamaño de fuente ( font-size
) en large
(Grande) y tipo de fuente ( font-family
) en serif
:
p { font: bold italic large serif; }
Configure la fuente del elemento como la fuente de la barra de estado utilizada en el sistema operativo:
p { font: status-bar; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
Fuentes del sistema | 1.0 | 1.0 | 4.0 | 6.0 | 1.0 |
Establecer el valor de font-stretch | soportado | 43 | ؟? | ؟? | ؟? |
Características generales
El valor de la propiedad se puede especificar font
como una palabra reservada, que seleccionará una fuente de las fuentes utilizadas por el sistema, o como una propiedad abreviada para una serie de propiedades relacionadas con la fuente.
Si el valor de la propiedad se especifica font
como una palabra reservada, debe ser uno de los siguientes: caption
o icon
, menu
o message-box
, small-caption
o status-bar
.
Si la propiedad de fuente se utiliza como propiedad abreviada para establecer varios valores relacionados con la fuente:
- Debe incluir dos valores:
<font-size>
<font-family>
- Opcionalmente puede incluir los valores:
<font-style>
<font-variant>
<font-weight>
<line-height>
- Debe preceder a los valores de las propiedades
font-style
,font-variant
yfont-weight
propiedadfont-size
. - El valor de la propiedad solo puede aceptar
font-variant
palabras reservadas definidas en CSS 2.1, a sabernormal
ysmall-caps
. - Un valor debe especificarse inmediatamente
line-height
después de un valorfont-size
, precedido por una barra/
, como sigue:16px/3
. - El valor debe ser el
font-family
último valor especificado.
<font-style>
Vea la página de características font-style
.
<font-variant>
Vea la página de características font-variant
.
<font-weight>
Consulte la página de características font-weight
.
<font-stretch>
Vea la página de características font-stretch
.
<font-size>
Vea la página de características font-size
.
<font-height>
Consulte la página de características font-height
.
<font-family>
Vea la página de características font-family
.
caption
La fuente utilizada en el sistema operativo para mostrar pancartas para los controles (como botones, menús desplegables, etc.)
icon
La fuente utilizada en el sistema operativo para mostrar los banners de iconos.
menu
La fuente utilizada en el sistema operativo para mostrar los controles (como botones, menús desplegables, etc.)
message-box
La fuente utilizada en el sistema operativo para mostrar cuadros de diálogo.
small-caption
La fuente utilizada en el sistema operativo para mostrar pancartas para controles pequeños.
status-bar
La fuente utilizada en el sistema operativo para mostrar el socio de estado en la parte inferior de las ventanas.
Estructura font css
font: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar;
dónde:
<font-variant-css21> = [ normal | small-caps ]
Consulte también
- Las páginas de sub-propiedades de la propiedad de fuente son:
font-style
,font-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