
La propiedad font-size en CSS establece el tamaño de la fuente, ajusta el tamaño de la fuente y puede cambiar el tamaño de otros elementos; porque el tamaño de la fuente se utilizará para calcular el valor de las longitudes <length>
de uno em
y ex
.
Funciones font-size css
Valor inicial | medium |
---|---|
Aplicado a | Todos los artículos. |
Heredable | Sí |
Móvil | No |
Valor calculado | Como se especificó. |
/* <absolute-size> palabras clave que representan tamaños absolutos */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /* <relative-size> palabras reservadas que representan tamaños relativos */ font-size: smaller; font-size: larger; /* <length> longitudes absolutas */ font-size: 12px; font-size: 0.8em; /* <percentage> longitudes relativas */ font-size: 80%; /* valores globales */ font-size: inherit; font-size: initial; font-size: unset;
Ejemplos y aplicaciones en código
Ejemplo de uso de diferentes valores y palabras reservadas con la propiedad font-size
:
<div id="container"> <p id="xx-small">xx-small</p> <p id="x-small">x-small</p> <p id="small">small</p> <p id="medium">medium</p> <p id="large">large</p> <p id="x-large">x-large</p> <p id="xx-large">xx-large</p> <p id="twelve-px">12px</p> <div id="parent-twelve-px"> 12px <p id="smaller">smaller</p> <p id="larger">larger</p> <p id="zero-dot-eight-em">0.8em</p> </div> <div id="parent-twenty-four-px"> 24px <p id="smaller">smaller</p> <p id="larger">larger</p> <p id="zero-dot-eight-em">0.8em</p> </div> </div>
Código CSS:
#container { width: 100%; display: flex; flex-wrap: wrap; } div > p { border: 1px solid black; display: flex; align-items: center; margin: 8px; padding: 8px; } #parent-twelve-px, #parent-twenty-four-px { display: flex; border: 1px solid black; padding: 8px; margin: 8px; } #parent-twelve-px { font-size: 12px; } #parent-twenty-four-px { font-size: 24px; } #xx-small { font-size: xx-small; } #x-small { font-size: x-small; } #small { font-size: small; } #medium { font-size: medium; } #large { font-size: large; } #x-large { font-size: x-large; } #xx-large { font-size: xx-large; } #smaller { font-size: smaller; } #larger { font-size: larger; } #twelve-px { font-size: 12px; } #zero-dot-eight-em { font-size: 0.8em; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 5.5 | 7 | 1.0 |
Características generales
La propiedad se puede definir font-size
de dos formas:
- Utilice una palabra reservada, que significa tamaño absoluto o tamaño relativo.
- Utilice longitudes absolutas o relativas.
Palabras reservadas
Las palabras reservadas se dividen en dos categorías: palabras reservadas que representan el tamaño absoluto y palabras reservadas que representan el tamaño relativo.
Volúmenes absolutos
xx-small
x-small
small
medium
large
x-large
xx-large
Estas palabras reservadas establecen el tamaño de fuente según el tamaño de fuente predeterminado (que es medium
). Volúmenes relativos larger
y smaller
. Estas palabras reservadas hacen que el tamaño de la fuente sea mayor o menor en relación con el tamaño de fuente del elemento principal.
<length>
Valor longitudinal positivo. Y cuando uno de los valores lineales usados es em
o ex
, entonces el tamaño de fuente definido será relativo al tamaño de fuente usado en el elemento principal del elemento de destino.
Por ejemplo, el valor 0.5em
significa que el tamaño de fuente del elemento actual es la mitad del tamaño de fuente del elemento padre. Y cuando el valor longitudinal es uno rem
, el tamaño de fuente será relativo al tamaño de fuente utilizado en el elemento raíz (es decir, el elemento <html>
).
<percentage>
Un porcentaje del tamaño de fuente del elemento principal. Es mejor usar tamaños relativos al tamaño de fuente predeterminado del usuario y evitar usar longitudes absolutas que usen unidades distintas de em
o ex
(o rem
).
Pero si es necesario, es preferible utilizar uno px
sobre el resto de unidades, ya que su significado no cambia en función de la resolución de pantalla que el sistema operativo estima (y desestima en la mayoría de los casos).
Estructura font-size css
font-size: <absolute-size> | <relative-size> | <length-percentage>;
dónde:
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> = larger | smaller <length-percentage> = <length> | <percentage>
Políticas de uso
Hay varias formas de determinar el tamaño de la fuente, puede utilizar palabras reservadas o valores longitudinales, ya sean en píxeles o em
; Tienes que elegir la metodología adecuada en función de tus necesidades y del documento HTML en el que estás trabajando.
palabras reservadas
El uso de palabras reservadas es bueno para ajustar el tamaño de fuente en la Web. Si establece el tamaño de fuente de un elemento <body>
con una palabra reservada, puede usar tamaños de fuente en relación con ese valor, lo que le permite aumentar el tamaño de fuente (o reducir) toda la página si lo desea.
pixeles
Establecer el tamaño de fuente en píxeles px
es una buena opción si desea especificar el tamaño exacto. Un píxel es fijo, independiente del sistema operativo y hace que los navegadores (de todo tipo) muestran caracteres a una altura igual al valor que usted especificó.
Tenga en cuenta que los resultados pueden diferir ligeramente entre los navegadores, ya que utilizan diferentes algoritmos para calcular el tamaño de fuente. Tenga en cuenta que establecer el tamaño de fuente en un píxel no ayuda a mejorar la accesibilidad, porque el usuario no puede cambiar el tamaño de fuente desde la configuración del navegador.
em
Otra forma de establecer el tamaño de fuente es usar valores em. La escala de este es dinámica. Cuando se define el valor de la propiedad font-size
, será 1em
igual al tamaño de fuente utilizado en el elemento principal. Si no establece la fuente size en cualquier parte de la página, se utilizará el tamaño de fuente predeterminado del navegador.
Normalmente es 16px
, es decir, 1em=16px
y 2em=32px
, y si establece el valor de la propiedad font-size
en 20px en el elemento <body>
, será 1em=20px
y 2em=40px
. Para calcular el valor que desea poner en uno, em
puede dividir el tamaño del elemento deseado por el tamaño del elemento principal en un píxel.
Por ejemplo, digamos que el tamaño de fuente del elemento <body>
está configurado en 16px
, y si el tamaño de fuente que desea aplicar al elemento actual es 12px
, entonces debe especificar el valor 0.75em
(porque 12/16
es igual 0.75
), y de manera similar, si desea el 10px
uso del tamaño de fuente 0.625em
(porque 10/16
es igual 0.625
), y para el 22px
uso de escala 1.375em
(cualquiera 22/16
).
Uno que em
es muy útil en CSS porque es relativo al tamaño de fuente que el usuario ha elegido en la configuración del navegador.
Es muy importante tener en cuenta cómo se acumula el valor de una em, así que tome el siguiente código HTML:
<span>Outer <span>inner</span> outer</span>
Y el código CSS:
span { font-size: 1.6em; }
Tenga en cuenta la salida:
Exterior interior exterior
Suponiendo que el tamaño de fuente font-size
predeterminado en el navegador es 16px
, las dos palabras externas en el ejemplo anterior serán 1.6×16 = 25.6px
, mientras que la palabra interna se mostrará con tamaño 40.96px
, porque el tamaño de fuente del elemento <span>
interno es 1.6em
relativo al tamaño de fuente del elemento principal, que a su vez es 1.6em
relativo al tamaño de fuente del elemento padre … etc. Este efecto se llama acumulativo.
rem
El uno se agregó para rem
solucionar el problema de acumulación con uno em
, ya que los valores rem
son relativos al tamaño de fuente en el elemento raíz <html>
, y no al elemento padre.
Es decir, el tamaño de fuente se puede determinar de forma relativa pero sin ser afectado por el tamaño de fuente del elemento padre, lo que resuelve el problema de la acumulación.
El siguiente código CSS es exactamente el mismo que el código CSS de la sección anterior, excepto que uno se convierte en rem
en lugar de em
:
span { font-size: 1.6rem; }
Aplicaremos la regla anterior al siguiente código HTML:
<span>Outer <span>inner</span> outer</span>
Experiencia en vivo:
Exterior interior exterior
Observe cómo todas las palabras se muestran con el mismo tamaño de fuente ( 25.6px
asumiendo que el tamaño de fuente predeterminado de su navegador es 16px
).
Consulte también
- La página de propiedades
font
que establece los valores de lasfont-style
subpropiedadesfont-weight
,font-kerning
yline-height
. - La página de propiedades
color
que establece el valor de color de los elementos.
- Introducción al Lenguaje de Programación 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 overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS