Características font-size en CSS

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 emo 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 emo 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 pxes 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=16pxy 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/16es igual 0.75), y de manera similar, si desea el 10px uso del tamaño de fuente 0.625em (porque 10/16es 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 remson 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 las font-style subpropiedades font-weight, font-kerning y line-height.
La página de propiedades color que establece el valor de color de los elementos.