los font-sizeCSS propiedad establece el tamaño de la fuente. Cambiar el tamaño de la fuente también actualiza los tamaños de la fuente en relación con el tamaño unidades, como em, ex, Etcétera.

Sintaxis

/*  values */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;font-size: xxx-large;/*  values */font-size: smaller;font-size: larger;/*  values */font-size: 12px;font-size: 0.8em;/*  values */font-size: 80%;/* Global values */font-size: inherit;font-size: initial;font-size: unset;

los font-size La propiedad se especifica de una de las siguientes formas:

  • Como una de las palabras clave de tamaño absoluto o relativo
  • Como un o un , relativo al tamaño de fuente del elemento.

Valores

xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
Palabras clave de tamaño absoluto, basadas en el tamaño de fuente predeterminado del usuario (que es medium).
larger, smaller
Palabras clave de tamaño relativo. La fuente será más grande o más pequeña en relación con el tamaño de la fuente del elemento principal, aproximadamente según la proporción utilizada para separar las palabras clave de tamaño absoluto anteriores.
elemento (raíz).

elemento, puede establecer un tamaño de fuente relativo en cualquier otro lugar de la página, lo que le permite escalar fácilmente la fuente hacia arriba o hacia abajo en toda la página en consecuencia.

Pixeles

Configuración del tamaño de fuente en valores de píxeles (px) es una buena opción cuando necesita precisión de píxeles. Un valor de px es estático. Esta es una forma independiente del sistema operativo y entre navegadores de decirle literalmente a los navegadores que representen las letras exactamente al número de píxeles de altura que especificó. Los resultados pueden variar levemente entre los navegadores, ya que pueden usar diferentes algoritmos para lograr un efecto similar.

La configuración de tamaño de fuente también se puede usar en combinación. Por ejemplo, si un elemento padre se establece en 16px y su elemento hijo se establece en larger, el elemento secundario se muestra más grande que el elemento principal en la página.

Nota: Definición de tamaños de fuente en px es Inaccesible, porque el usuario no puede cambiar el tamaño de fuente en algunos navegadores. Por ejemplo, los usuarios con visión limitada pueden desear establecer el tamaño de fuente mucho más grande que el tamaño elegido por un diseñador web. Evite usarlos para tamaños de fuente si desea crear un diseño inclusivo.

Ems

Usando un em valor crea un tamaño de fuente dinámico o calculado (históricamente el valor em la unidad se derivó del ancho de una “M” mayúscula en un tipo de letra dado). El valor numérico actúa como un multiplicador de la font-size propiedad del elemento en el que se utiliza. Considere este ejemplo:

pfont-size: 2em;

En este caso, el tamaño de fuente de

los elementos serán el doble de los calculados font-size heredado por

elementos. Por extensión, un font-size de 1em es igual al calculado font-size del elemento en el que se utiliza.

Si un font-size no se ha configurado en ninguno de los

antepasados, entonces 1em será igual al navegador predeterminado font-size, que suele ser 16px. Entonces, por defecto 1em es equivalente a 16px, y 2em es equivalente a 32px. Si tuviera que establecer un font-size de 20px en el elemento decir, entonces 1em sobre el

los elementos serían en cambio equivalentes a 20px, y 2em sería equivalente a 40px.

Para calcular el em equivalente para cualquier valor de píxel requerido, puede utilizar esta fórmula:

em = desired element pixel value / parent element font-size in pixels

Por ejemplo, suponga que font-size de El de la página está configurada para 16px. Si el tamaño de fuente que desea es 12px, entonces debes especificar 0.75em (porque 16/12 = 0,75). Del mismo modo, si desea un tamaño de fuente de 10px, luego especifique 0.625em (10/16 = 0,625); por 22px, especificar 1.375em (22/16).

los em es una unidad muy útil en CSS ya que adapta automáticamente su longitud en relación con la fuente que el lector elige usar.

Un dato importante a tener en cuenta: los valores de em son compuestos. Toma el siguiente HTML y CSS:

htmlfont-size: 62.5%;/* font-size 1em = 10px on default browser settings */spanfont-size: 1.6em;
<div><span>Outer <span>innerspan> outerspan>div>

El resultado es:

Suponiendo que el navegador es el predeterminado font-size es 16px, las palabras “exterior” se representarán a 16px, pero la palabra “interior” se representará a 25.6px. Esto se debe a que el interior ‘s font-size es 1.6em que es relativo a su padre font-size, que a su vez es relativo a su padre font-size. A esto se le suele llamar compuesto.

Rems

rem Los valores se inventaron para evitar el problema de la combinación. rem los valores son relativos a la raíz html elemento, no el elemento padre. En otras palabras, le permite especificar un tamaño de fuente de forma relativa sin verse afectado por el tamaño del padre, eliminando así la composición.

El CSS a continuación es casi idéntico al ejemplo anterior. La única excepción es que la unidad se ha cambiado a rem.

htmlfont-size: 62.5%;/* font-size 1em = 10px on default browser settings */spanfont-size: 1.6rem;

Luego aplicamos este CSS al mismo HTML, que se ve así:

<span>Outer <span>innerspan> outerspan>

En este ejemplo, las palabras “exterior interior exterior” se muestran todas a 16 px (suponiendo que el navegador font-size se ha dejado en el valor predeterminado de 10px).

Ex

Como el em unidad, un elemento font-size configurar usando el ex la unidad es calculada o dinámica. Se comporta exactamente de la misma manera, excepto que al configurar el font-size propiedad usando ex unidades, el font-size es igual a la altura x del primera fuente disponible utilizado en la página. El valor numérico multiplica el elemento heredado. font-size y el font-size compuestos relativamente.

Consulte el borrador del editor del W3C para obtener una descripción más detallada de unidades de longitud relativa de fuente tal como ex.

Definicion formal

Valor inicial medium
Se aplica a todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado sí
Porcentajes consulte el tamaño de fuente del elemento principal
Valor calculado como se especifica, pero con longitudes relativas convertidas en longitudes absolutas
Tipo de animación una longitud

Sintaxis formal

||
where 
 = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
 = larger | smaller
 = |

Ejemplos de

Establecer tamaños de fuente

CSS

.smallfont-size: xx-small;.largerfont-size: larger;.pointfont-size: 24pt;.percentfont-size: 200%;

HTML

<h1class="small">Small H1h1><h1class="larger">Larger H1h1><h1class="point">24 point H1h1><h1class="percent">200% H1h1>

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de fuentes CSS, nivel 4
La definición de ‘tamaño de fuente’ en esa especificación.		 Borrador de trabajo Agrega xxx-large palabra clave.
Módulo de fuentes CSS nivel 3
La definición de ‘tamaño de fuente’ en esa especificación.		 Recomendación Ningún cambio.
CSS Nivel 2 (Revisión 1)
La definición de ‘tamaño de fuente’ en esa especificación.		 Recomendación Ningún cambio.
Nivel 1 de CSS
La definición de ‘tamaño de fuente’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
font-size 1 12 1 5.5 7 1 1 18 4 10.1 1 1.0
rem_values 31 12 31[“Before Firefox 57, animations using em units are not affected by changes to the font-size of the animated element’s parent (bug 1254424).”, “Before Firefox 57, some language settings’ inherited font-size is smaller than expected (bug 1391341).”] 119-10 28 7 4.1 42 31 28 7 4.0
xxx-large 79 79 70 No No No 79 79 No No No 12,0

Ver también