CSS font-sizePropiedad
Establecer el tamaño de fuente de diferentes elementos HTML:
¡Pruébalo »
Definición e instrucciones de uso de la propiedad
La propiedad font-size se utiliza para establecer el tamaño de la fuente.
font-size no solo determina el tamaño de visualización del texto, sino que también afectaem、line-height、letter-spacingy otros cálculos de composición tipográfica relacionados.
| Valor por defecto: | medium |
|---|---|
| Herencia: | yes |
| Versión: | CSS1 |
| Sintaxis de JavaScript: | object.style.fontSize="larger" |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que soporta la propiedad por primera vez.
| Propiedad | |||||
|---|---|---|---|---|---|
| font-size | 1.0 | 5.5 | 1.0 | 1.0 | 7.0 |
Conceptos básicos
font-sizeSe utiliza para establecer el tamaño del texto dentro de un elemento.
El tamaño de fuente raíz predeterminado del navegador suele ser16px。
es decir, por defectohtml { font-size: 100%; }normalmente equivale ahtml { font-size: 16px; }。
Este valor predeterminado se convierte en la base de cálculo de muchas unidades relativas.
Ejemplo
html {
font-size: 100%; /* Normalmente equivale a 16px, respetando la configuración del navegador del usuario */
}
/* Establecer el tamaño del texto del cuerpo */
body {
font-size: 16px; /* Tamaño de fuente base común para el cuerpo */
line-height: 1.6; /* Usar altura de línea sin unidad para facilitar la herencia */
}
/* Establecer el tamaño del título */
h1 {
font-size: 2rem; /* Por defecto, aproximadamente 32px */
}
No se recomienda fijar arbitrariamente el tamaño de fuente del elemento raíz a un valor muy pequeño, porque puede afectar las preferencias de fuente del navegador del usuario y la experiencia de accesibilidad.
Tipos comunes de valores de font-size
font-sizeSe pueden usar palabras clave, unidades de longitud, porcentajes y funciones.
Diferentes valores son adecuados para diferentes escenarios.
| Tipo de valor | Ejemplo | Descripción | Escenario adecuado |
|---|---|---|---|
| Palabra clave | small、large |
El navegador lo calcula según una proporción predefinida. | Páginas simples, escenarios donde se necesita seguir la configuración predeterminada del usuario. |
| Unidades absolutas | 16px、12pt |
El tamaño es relativamente fijo y altamente controlable. | Control preciso de la interfaz, estilos de impresión. |
| Unidades relativas | 1rem、1.25em |
Se calculan en relación con el elemento padre o el elemento raíz. | Diseño responsivo, páginas basadas en componentes. |
| Unidades de viewport | 4vw、3vmin |
Se calculan en relación con el tamaño del viewport del navegador. | Titulares grandes, páginas de presentación, tipografía fluida. |
| Funciones CSS | clamp()、calc() |
Se calcula el tamaño de fuente dinámicamente mediante expresiones. | Tipografía responsiva moderna. |
Valores de palabras clave
CSS proporciona dos tipos de palabras clave para el tamaño de fuente.
Un tipo son palabras clave de tamaño absoluto, por ejemplosmall、medium、large。
El otro tipo son palabras clave de tamaño relativo, por ejemplolargerysmaller。
Palabras clave de tamaño absoluto
Las palabras clave de tamaño absoluto no son valores de píxel fijos, sino niveles calculados por el navegador según el tamaño de fuente predeterminado.
| Palabra clave | Valor aproximado con 16px predeterminado | Proporción | Escenario adecuado |
|---|---|---|---|
xx-small |
Aprox. 9px | 0.56 veces | Notas extremadamente pequeñas, no se recomienda para el cuerpo del texto. |
x-small |
Aprox. 10px | 0.625 veces | Notas al pie o información auxiliar. |
small |
Aprox. 13px | 0.8 veces | Texto auxiliar. |
medium |
Aprox. 16px | 1 vez | Cuerpo de texto predeterminado. |
large |
Aprox. 18px | 1.125 veces | Subtítulo o texto enfatizado. |
x-large |
Aprox. 24px | 1.5 veces | Título. |
xx-large |
Aprox. 32px | 2 veces | Título grande. |
xxx-large |
Aprox. 48px | 3 veces | Título de exhibición. |
Palabras clave de tamaño relativo
largerysmallerSe amplían o reducen en relación con el tamaño de fuente del elemento padre.
Son adecuadas para escenarios simples donde se necesita seguir el cambio de tamaño de fuente del padre.
Ejemplo
.parent {
font-size: 16px;
}
/* larger se ampliará en relación con el padre, la proporción específica la decide el navegador */
.child-larger {
font-size: larger;
}
/* smaller se reducirá en relación con el padre, la proporción específica la decide el navegador */
.child-smaller {
font-size: smaller;
}
Las palabras clave son relativamente amigables con la accesibilidad, pero tienen menor control; en proyectos reales se usan más comúnmente
rem、emoclamp()。
Unidades absolutas
Los valores de las unidades absolutas son relativamente fijos y no dependen del tamaño de fuente del elemento padre.
Son adecuadas para interfaces que requieren control preciso, o para estilos de impresión.
| Unidad | Significado | Relación de conversión | Escenario adecuado |
|---|---|---|---|
px |
Píxel lógico CSS. | La unidad de longitud más utilizada en pantalla. | Interfaces web, tamaños de fuente de componentes. |
pt |
Punto de impresión. | 1pt = 1/72 pulgada, aproximadamente 1.333px. | Estilos de impresión. |
cm / mm |
Centímetros / milímetros. | 1cm = 37.8px，1mm = 3.78px. | Composición tipográfica de impresión, raramente se usa en web. |
in |
Pulgada. | 1in = 96px. | Impresión o conversión de tamaños especiales. |
pc |
Pica. | 1pc = 12pt = 16px. | Escenarios de tipografía tradicional, muy raramente en web. |
Ejemplo
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */
/* Al imprimir, normalmente se usa pt */
@media print {
body {
font-size: 12pt;
}
}
/* En pantalla, normalmente se usa px, rem o clamp() */
@media screen {
body {
font-size: 16px;
}
}
En pantallas modernas, 1px generalmente se refiere a un píxel lógico CSS, no necesariamente igual a un píxel físico.
Unidades relativas
Las unidades relativas se calculan dinámicamente según un valor de referencia.
Son las unidades más utilizadas para tamaños de fuente en el diseño responsivo moderno.
| Unidad | Objeto de referencia | Descripción | Uso típico |
|---|---|---|---|
em |
Tamaño de fuente del elemento padre o del elemento actual. | Cuando se usafont-sizees relativo al elemento padre; al anidar, se multiplica en cadena. |
Escalado de componentes locales. |
rem |
Elemento raízhtmlTamaño de fuente. |
No se ve afectado por el anidamiento, el cálculo es más estable. | Sistema de tamaños de fuente de todo el sitio. |
% |
Tamaño de fuente del elemento padre. | Enfont-sizeSu comportamiento es similar aem。 |
Escalado según la proporción del padre. |
ch |
Carácter0Ancho de. |
Se usa más comúnmente para controlar el ancho de línea. | width: 60ch; |
ex |
Altura de la letra x minúscula. | Fuertemente influenciado por el diseño tipográfico. | Maquetación especial limitada. |
lh |
La altura de línea del elemento. | Unidades nuevas en CSS Values 4. | Espaciado alineado con la altura de línea. |
Diferencia entre em y rem
emAl establecerfont-sizese calcula en relación con el tamaño de fuente del elemento padre.
Si se usa en múltiples niveles de anidamientoem, el tamaño de fuente se multiplica en cada nivel.
remSiempre se calcula respecto al tamaño de fuente del elemento raíz, por lo que es más estable.
Ejemplo
html {
font-size: 16px;
}
/* em se ve afectado por el tamaño de fuente del padre */
.outer {
font-size: 1.5em; /* 16px × 1.5 = 24px */
}
.middle {
font-size: 1.5em; /* 24px × 1.5 = 36px */
}
/* rem siempre se calcula respecto a html */
.outer-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}
.middle-rem {
font-size: 1.5rem; /* 16px × 1.5 = 24px, no se multiplica en cadena */
}
En
font-sizeal usarlo enemse refiere al tamaño de fuente del padre; pero en el mismo elementopaddingomarginal usarlo enemse refiere al tamaño de fuente del propio elemento.
Unidades de viewport
Las unidades de viewport se calculan según el tamaño de la ventana del navegador.
Son adecuadas para lograr tipografía fluida que cambia con el ancho de la pantalla.
Sin embargo, usar solo unidades de viewport puede resultar en texto demasiado pequeño en móviles y demasiado grande en pantallas ultrapanorámicas.
| Unidad | Significado | Descripción | Caso de uso típico |
|---|---|---|---|
vw |
El 1% del ancho del viewport. | Cuanto más ancho es el viewport, mayor es el tamaño de fuente. | Títulos responsivos. |
vh |
El 1% de la altura del viewport. | En móviles se ve afectado por la barra de herramientas del navegador. | Páginas de presentación a pantalla completa. |
vmin |
vwyvhEl 1% del valor más pequeño entre ambos. |
Adecuado para equilibrar orientación horizontal y vertical. | Títulos grandes adaptativos. |
vmax |
vwyvhEl 1% del valor más grande entre ambos. |
Mayor amplitud de variación. | Diseño visual de exhibición. |
svh / dvh / lvh |
Altura de viewport pequeña / dinámica / grande. | Se usa para resolver el problema de los cambios en la barra de herramientas del navegador en móviles. | Páginas de pantalla completa en móviles. |
cqi / cqb |
Unidades de consultas de contenedor. | Relativas al tamaño del contenedor, no al viewport completo. | Tipografía responsiva a nivel de componente. |
Ejemplo
h1 {
font-size: 5vw;
}
/* Se recomienda usar clamp() para establecer límites mínimo y máximo */
h1 {
font-size: clamp(1.5rem, 5vw, 3.5rem);
}
/* Las unidades de consultas de contenedor son adecuadas para diseño responsivo a nivel de componente */
.card {
container-type: inline-size;
}
.card-title {
font-size: clamp(1rem, 4cqi, 2rem);
}
Las unidades de consultas de contenedor son adecuadas para bibliotecas de componentes y diseños de tarjetas, porque el tamaño del componente no siempre equivale al tamaño del viewport del navegador.
Función clamp()
clamp()es una función muy útil en la tipografía responsiva moderna.
Permite limitar el tamaño de fuente entre un valor mínimo y un valor máximo.
El valor preferido suele usar unidades de viewport o expresiones de cálculo, para que el tamaño de fuente cambie con la pantalla.
| Parámetro | Significado | Ejemplo | Descripción |
|---|---|---|---|
| Valor mínimo | El tamaño de fuente no será menor que este valor. | 1rem |
Garantiza legibilidad en móviles. |
| Valor preferido | El navegador intenta usar primero este valor dinámico. | 2vw + 1rem |
Hace que el tamaño de fuente fluya con la pantalla. |
| Valor máximo | El tamaño de fuente no será mayor que este valor. | 3rem |
Evita que el texto sea demasiado grande en pantallas grandes. |
Ejemplo
h1 {
font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}
h2 {
font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}
p {
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}
/* Combinado con variables CSS para construir un sistema de diseño */
:root {
--text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
--text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
--text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
--text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}
.article-title {
font-size: var(--text-xl);
}
Funciones min() y max()
min()toman el valor más pequeño de varios valores.
max()toman el valor más grande de varios valores.
Se pueden usar para el tamaño de fuente, pero en tipografía fluida normalmente no son tanclamp()intuitivas.
| Función | Comportamiento | Ejemplo | Caso de uso adecuado |
|---|---|---|---|
min() |
Selecciona el resultado menor de los cálculos. | min(5vw, 48px) |
Solo limita el valor máximo. |
max() |
Selecciona el resultado mayor de los cálculos. | max(1rem, 2vw) |
Solo limita el valor mínimo. |
clamp() |
Establece simultáneamente el mínimo, el preferido y el máximo. | clamp(1rem, 2vw, 2rem) |
Solución completa de tamaño de fuente fluido. |
Ejemplo
h1 {
font-size: min(5vw, 48px);
}
/* El tamaño de fuente no será menor que 16px, pero en pantallas grandes puede ser demasiado grande */
h2 {
font-size: max(16px, 3vw);
}
/* Limita el mínimo y el máximo a la vez, más adecuado para proyectos reales */
h3 {
font-size: clamp(16px, 3vw, 32px);
}
Función calc()
calc()permite mezclar diferentes unidades en cálculos dentro de CSS.
Se usa a menudo para combinar valores fijos y relativos.
En el caso del tamaño de fuente,calc()a menudo se combina convw、remse usa junto con.
Ejemplo
h1 {
font-size: calc(1.5rem + 2vw);
}
/* Usar calc() dentro de clamp(), sintaxis más clara */
h2 {
font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}
/* Nota: se deben dejar espacios alrededor de los operadores */
p {
font-size: calc(1rem + 0.25vw);
}
calc(1rem+2vw)Esta forma de escribir es incorrecta; se deben escribir espacios a ambos lados del operador, por ejemplocalc(1rem + 2vw)。
Herencia y cascada
font-sizees una propiedad heredable.
Si un elemento hijo no declara un tamaño de fuente, hereda el tamaño de fuente calculado del elemento padre.
Esta es tambiénemuna de las razones por las que el anidamiento puede provocar fácilmente problemas de multiplicación en cadena.
Ejemplo
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Ejemplo de herencia de font-size</title>
<style>
.article {
font-size: 18px; /* los elementos hijos heredan este tamaño por defecto */
}
.article p {
font-size: 1em; /* equivale a 18px */
}
.article .note {
font-size: 0.875em; /* 18px × 0.875 = 15.75px */
}
</style>
</head>
<body>
<div class="article">
<p>Este es un párrafo de texto.</p>
<p class="note">Este es un texto explicativo más pequeño.</p>
</div>
</body>
</html>
Mejores prácticas
En proyectos reales, no se recomienda fijar todo el texto directamente apx。
Una mejor manera es usar el tamaño de fuente raíz, variables CSS yclamp()combinarlos para formar un sistema de tamaños de fuente estable.
| Escritura no recomendada | Escritura recomendada | Motivo |
|---|---|---|
font-size: 12px;Se usa como cuerpo de texto principal. |
font-size: 1rem; |
Si el texto del cuerpo es demasiado pequeño, se perjudica la experiencia de lectura. |
Todos los componentes en múltiples capas usanem。 |
El tamaño de fuente global usarem, y para el escalado local se usaem。 |
para evitar que la multiplicación en cadena por anidamiento haga que el tamaño de fuente se descontrole. |
Los títulos solo usanfont-size: 6vw;。 |
font-size: clamp(1.75rem, 4vw, 3.5rem); |
para evitar que sean demasiado pequeños en pantallas pequeñas y demasiado grandes en pantallas grandes. |
| Definir tamaños de fuente arbitrarios en diferentes páginas. | Usar variables CSS para unificar la escala de tamaños de fuente. | Facilita mantener un sistema visual coherente. |
Ejemplo
:root {
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
--font-size-hero: clamp(2rem, 6vw, 4.5rem);
}
body {
font-size: var(--font-size-base);
line-height: 1.6;
}
.caption {
font-size: var(--font-size-sm);
}
.article-title {
font-size: var(--font-size-xl);
}
.hero-title {
font-size: var(--font-size-hero);
}
Generalmente se puede usar
rempara establecer el sistema global de tamaños de fuente, usarempara el escalado proporcional local, usarclamp()para manejar los títulos responsivos.
Sistema de escala de fuentes recomendado
A continuación se presenta un sistema de tokens de tamaños de fuente basado en el enfoque de Modular Scale.
Cada token usaclamp()para garantizar un tamaño adecuado en pantallas mínimas y máximas.
| Token | Uso | Valor recomendado con clamp() | Notas |
|---|---|---|---|
--text-xs |
Etiquetas, insignias | clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem) |
No se recomienda menos de 11px. |
--text-sm |
Texto auxiliar, aclaraciones | clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem) |
Común en notas e información secundaria. |
--text-md |
Texto base (cuerpo) | clamp(1rem, 1vw + 0.75rem, 1.125rem) |
Recomendado como tamaño de fuente de cuerpo predeterminado. |
--text-lg |
Subtítulo | clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem) |
Título pequeño para artículos o tarjetas. |
--text-xl |
Encabezado de nivel h3 | clamp(1.25rem, 2vw + 0.75rem, 2rem) |
Título de subsección. |
--text-2xl |
Encabezado de nivel h2 | clamp(1.5rem, 2.5vw + 1rem, 2.5rem) |
Título de capítulo. |
--text-3xl |
Encabezado de nivel h1 | clamp(2rem, 4vw + 1rem, 3.5rem) |
Título principal de página. |
--text-hero |
Título grande de exhibición | clamp(2.5rem, 6vw + 1rem, 5rem) |
Título de portada o landing. |
Ejemplo
:root {
--text-xs: clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
--text-sm: clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
--text-md: clamp(1rem, 1vw + 0.75rem, 1.125rem);
--text-lg: clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
--text-xl: clamp(1.25rem, 2vw + 0.75rem, 2rem);
--text-2xl: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
--text-3xl: clamp(2rem, 4vw + 1rem, 3.5rem);
--text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}
body {
font-size: var(--text-md);
line-height: 1.6;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }
Prácticas recomendadas y prácticas a evitar
A continuación se enumeran varias escrituras recomendadas y no recomendadas en escenarios comunes.
| Escenario | Escritura no recomendada | Escritura recomendada |
|---|---|---|
| Configuración del tamaño de fuente raíz | html { font-size: 10px; } |
html { font-size: 100%; } |
| Tamaño de fuente del cuerpo | p { font-size: 14px; } |
p { font-size: 1rem; } |
| Tamaño de fuente de títulos | h1 { font-size: 48px; } |
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); } |
| Texto pequeño | small { font-size: 11px; } |
small { font-size: max(0.75rem, 12px); } |
| Tamaño de fuente responsivo | Usar múltiples@mediapuntos de interrupción para cambiar valores fijos |
Usarclamp()para lograr una transición fluida |
| Accesibilidad | html { font-size: 62.5%; } |
No establecer un tamaño de fuente raíz, o usar100% |
No
htmlobodyusar un valor fijo enpxpara establecer el tamaño de fuente raíz; esto sobrescribe la preferencia de tamaño de fuente del usuario en el navegador y desactiva la función de accesibilidad de fuentes grandes.
Derivación de la fórmula de tipografía fluida con clamp()
clamp()El valor intermedio normalmente usa unidades de viewport más una base de rem.
Esto forma una fórmula de interpolación lineal de "ancla + pendiente", que controla con precisión la tasa de cambio del tamaño de fuente en diferentes anchos de pantalla.
Pasos de derivación de la fórmula
Supongamos que se necesita una transición suave del tamaño de fuente de 16px a 24px entre viewports de 320px y 1240px.
| Paso | Fórmula | Cálculo de este ejemplo |
|---|---|---|
| 1. Calcular la pendiente | (px máx - px mín) / (vp máx - vp mín) | (24 - 16) / (1240 - 320) = 0.00869, aproximadamente 0.87vw |
| 2. Calcular la intersección | px mín - pendiente × vp mín | 16 - 0.00869 × 320 = 13.2px, aproximadamente 0.825rem |
| 3. Obtener el valor preferido | pendiente × 100vw + intersección | 0.87vw + 0.825rem |
Ejemplo
/* Pendiente = (px máx - px mín) / (vp máx - vp mín) */
/* Intersección = px mín - pendiente × vp mín */
/* Ejemplo: transición de 16px a 24px entre viewports de 320px~1240px */
/* Pendiente = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* Intersección = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */
p {
font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}
clamp()Es compatible con Chrome 79+, Firefox 75+, Safari 13.1+ y Edge 79+, por lo que se puede usar de forma segura en producción.
Explicación detallada de las funciones min() y max()
min(a, b, ...)Devuelve el valor mínimo entre varios valores, lo que equivale a establecer un "límite superior".
max(a, b, ...)Devuelve el valor máximo entre varios valores, lo que equivale a establecer un "límite inferior".
Pueden recibir cualquier cantidad de argumentos y se pueden mezclar diferentes unidades entre los argumentos.
| Función | Comportamiento | Efecto | Escenarios de uso |
|---|---|---|---|
min() |
Selecciona el valor mínimo entre todos los argumentos | Establecer límite superior | Evita que el tamaño de fuente sea demasiado grande. |
max() |
Selecciona el valor máximo entre todos los argumentos | Establecer límite inferior | Garantiza un tamaño de fuente mínimo legible. |
clamp() |
Limita simultáneamente el valor mínimo, el valor preferido y el valor máximo | Establecer límites superior e inferior | Solución completa de tamaño de fuente fluido. |
Ejemplo
h2 {
font-size: min(5vw, 2rem);
}
/* max() — el tamaño de fuente no es inferior a 1rem */
small {
font-size: max(0.75vw, 1rem);
}
/* Combinación: min y max equivalen a clamp */
/* clamp(MIN, VAL, MAX) es equivalente a max(MIN, min(VAL, MAX)) */
h1 {
font-size: max(1.5rem, min(4vw, 3rem));
}
/* Múltiples argumentos: toma el mínimo de los tres */
.label {
font-size: min(1rem, 3vw, 14px);
}
/* Unidades mixtas */
.fluid {
font-size: max(12px, 1.2vw + 0.5rem);
}
Explicación detallada de la función calc()
calc()Admite las cuatro operaciones aritméticas (suma, resta, multiplicación y división) y puede mezclar cualquier unidad.
En escenarios de tamaño de fuente, a menudo se usa conremyvwen combinación.
Reglas de operaciones aritméticas
| Operación | Sintaxis | Restricciones | Ejemplo |
|---|---|---|---|
| Suma | calc(1rem + 0.5vw) |
Debe haber espacios en ambos lados del operador. | font-size: calc(1rem + 0.5vw); |
| Resta | calc(2rem - 4px) |
Debe haber espacios en ambos lados del operador. | font-size: calc(2rem - 4px); |
| Multiplicación | calc(1.5 * 16px) |
Uno de los valores debe carecer de unidad. | font-size: calc(1.5 * 16px); |
| División | calc(24px / 1.5) |
El lado derecho debe ser un número sin unidad y distinto de 0. | font-size: calc(24px / 1.5); |
calc(1rem+2px)es una sintaxis incorrecta; se deben escribir espacios en ambos lados del operador. La sintaxis correcta escalc(1rem + 2px)。
Ejemplo
font-size: calc(1rem + 0.5vw); /* Suma */
font-size: calc(2rem - 4px); /* Resta */
font-size: calc(1.5 * 16px); /* Multiplicación (uno debe ser un número sin unidad) */
font-size: calc(24px / 1.5); /* División (el lado derecho debe ser un número sin unidad) */
/* Combinado con variables CSS */
:root {
--scale: 1.25;
--base: 1rem;
}
h3 {
font-size: calc(var(--base) * var(--scale));
}
/* calc anidado (los navegadores modernos admiten omitir el calc interno) */
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);
Uso de calc para construir una escala tipográfica modular
Mediantecalc()y variables CSS, se puede implementar una escalera de tamaños de fuente basada en una proporción fija.
El siguiente ejemplo utiliza la proporción Major Third (1.25).
Ejemplo
:root {
--ratio: 1.25;
--step-0: 1rem; /* 16px */
--step-1: calc(var(--step-0) * var(--ratio)); /* 20px */
--step-2: calc(var(--step-1) * var(--ratio)); /* 25px */
--step-3: calc(var(--step-2) * var(--ratio)); /* 31.25px */
--step--1: calc(var(--step-0) / var(--ratio)); /* 12.8px */
}
p { font-size: var(--step-0); }
h3 { font-size: var(--step-1); }
h2 { font-size: var(--step-2); }
h1 { font-size: var(--step-3); }
small { font-size: var(--step--1); }
Herencia y cascada
font-sizeEs una propiedad heredable.
Si un elemento hijo no establece explícitamente el tamaño de fuente, hereda el valor calculado del elemento padre, no el valor declarado.
Proceso de cálculo de herencia
A continuación se muestra una cadena típica de herencia de tamaño de fuente.
| Selector | Valor declarado | Resultado calculado | Explicación |
|---|---|---|---|
html |
100% |
16px | Valor predeterminado del navegador. |
body |
inherit | 16px | Heredado de html. |
.article |
1.125rem |
18px | Calculado según el tamaño de fuente raíz. |
.article p |
inherit | 18px | Se hereda el valor calculado de 18px, no 1.125rem. |
.article em |
1em |
18px | emSegún el valor calculado del elemento padre, 1 × 18px = 18px. |
Prioridad y orden de cascada
Cuando varias reglas establecen simultáneamentefont-size, se aplican en el siguiente orden de prioridad, de mayor a menor.
| Prioridad | Origen | Ejemplo |
|---|---|---|
| 1 (la más alta) | !importantEstilo en línea |
<p style="font-size: 20px !important"> |
| 2 | !importantReglas de hoja de estilos |
p { font-size: 20px !important; } |
| 3 | Estilo en línea | <p style="font-size: 18px"> |
| 4 | Selector de ID | #title { font-size: 24px; } |
| 5 | Selectores de clase / pseudoclase / atributo | .heading { font-size: 22px; } |
| 6 | Selectores de elemento / pseudoelemento | p { font-size: 16px; } |
| 7 (la más baja) | Herencia / estilos predeterminados del navegador | Proviene del elemento padre o del valor predeterminado del navegador. |
Ejemplo
/* 1. Estilo en línea !important */
/* <p style="font-size: 20px !important"> */
/* 2. Reglas de hoja de estilos !important */
p { font-size: 20px !important; }
/* 3. Estilo en línea */
/* <p style="font-size: 18px"> */
/* 4. Selector de ID */
#title { font-size: 24px; }
/* 5. Selectores de clase/pseudoclase/atributo */
.heading { font-size: 22px; }
/* 6. Selectores de elemento/pseudoelemento */
p { font-size: 16px; }
/* 7. Herencia / estilos predeterminados del navegador */
No uses
htmlobodyun valor fijo enpxpara establecer el tamaño de fuente raíz, ya que esto anula las preferencias de fuente del navegador del usuario. Usahtml { font-size: 100%; }o simplemente no lo configures.
Demostración interactiva
Con la demostración siguiente, puedes ver de forma intuitiva el efecto del tamaño de fuente con diferentes unidades.
Selecciona el tipo de unidad y arrastra el control deslizante de valor; el área de vista previa se actualiza en tiempo real.
Resumen
font-sizeEs la propiedad fundamental del sistema de tipografía de CSS.
pxAdecuado para un control preciso,remAdecuado para sistemas globales de tamaño de fuente,emAdecuado para escalado local.
Las unidades de viewport son adecuadas para la tipografía fluida, pero es mejor combinarlas conclamp()para limitar los límites superior e inferior.
En proyectos reales, se recomienda usar variables CSS para gestionar los tamaños de fuente de forma unificada, priorizando la legibilidad y la experiencia responsive.
Para el texto del cuerpo en pantalla, se recomiendarem + clamp(), para estilos de impresión usapt。
No bloquees el tamaño de fuente raíz; siempre establece un límite mínimo para el texto pequeño (se recomienda no menos de 12px / 0.75rem).
Para el diseño responsive a nivel de componentes, prioriza las unidades de consulta de contenedorcqi / cqb。
Artículos relacionados
Tutorial de CSS:CSS Font
Referencia de CSS:Propiedad font
Otras extensiones