Limitación de tipografía fluida
Generar una escala de fuente lineal CSS entre dos anchos de ventana gráfica.
Tus valores
Expresión de limitación CSS
El valor CSS generado es un valor inicial. Se recomienda usar unidades de texto relativas cuando sea apropiado y probar el zoom, el escalado del texto y el desbordamiento.
Comparación de escenarios
Hasta tres instantáneas en esta pestaña. Cargar una reemplaza las entradas actuales.
Fórmula
Utilice m = 100(f₁−f₀)/(v₁−v₀) y b = f₀−mv₀/100. El tamaño fluido es clamp(f₀, b + m×vw, f₁); f indica los tamaños de fuente y v indica los anchos de la ventana gráfica.
Generar una escala de fuente lineal CSS entre dos anchos de ventana gráfica.
Ejemplo resuelto
- Tamaño mínimo de fuente (px)
- 16
- Tamaño máximo de fuente (px)
- 24
- Ancho mínimo de la ventana gráfica (px)
- 400
- Ancho máximo de la ventana gráfica (px)
- 1200
- Expresión de limitación CSS
- clamp(16px, calc(12px + 1vw), 24px)
- Coeficiente de la ventana gráfica
- 1 vw
- Intercepción de píxeles
- 12 px
Alcance y limitaciones
El valor CSS generado es un valor inicial. Se recomienda usar unidades de texto relativas cuando sea apropiado y probar el zoom, el escalado del texto y el desbordamiento.
Se comprueban los valores faltantes y los rangos permitidos en las entradas. Un resultado fuera del rango numérico finito no se muestra. El redondeo afecta la visualización, mientras que el cálculo utiliza la precisión numérica del modelo.
Verifique sus unidades y supuestos antes de confiar en un resultado. Cambiar una etiqueta no convierte una moneda ni una unidad física.
Versión de la fórmula: 174bffea8b3a · Ejemplo comprobado: