Calculadora de tamaño de fuente fluido

Definir la transición de tamaño

1. Ingrese anchos de ventana gráfica más pequeños y más grandes en píxeles CSS, con una separación de al menos 100px, y el tamaño de fuente en cada ancho. Los tamaños pueden aumentar, disminuir o permanecer constantes. Indique los píxeles CSS supuestos por rem.
2. Inspeccione la declaración actual y la tabla de puntos finales. Cambie el ancho de prueba del modelo para inspeccionar otro punto; esto cambia la muestra del modelo sin cambiar el CSS copiado ni pretender que la tarjeta es una ventana gráfica.
3. Copie CSS y pruébelo en un elemento que no sea raíz en la página receptora. Su tamaño real de raíz, ventana gráfica, fuente y comportamiento de zoom son importantes. La denegación del portapapeles le permite seleccionar la misma declaración manualmente.

entender la expresión

La calculadora divide la diferencia font-size por la diferencia del ancho de la ventana gráfica para obtener una pendiente. Multiplica esa pendiente por 100 para el término vw, luego convierte el desplazamiento y los límites de tamaño numérico a rem usando la raíz supuesta.

Más pequeño y más grande describen los anchos de las ventanas gráficas, no necesariamente los tamaños de fuente. Un diseño decreciente utiliza un coeficiente de ventana gráfica negativo con límites clamp ordenados numéricamente. Tamaños de fuente iguales producen una declaración rem constante más simple.

Los coeficientes se redondean a seis decimales; los valores exactamente a mitad de camino se redondean alejándose de cero. La tabla y la muestra usan los coeficientes copiados, por lo que pueden diferir ligeramente de la interpolación ideal. Los resultados en píxeles muestran tres decimales e indican el redondeo.

La raíz es una suposición usada para la conversión. Una raíz distinta en la página de destino puede cambiar los límites del texto y los anchos de transición. rem se refiere a la raíz del documento y vw a la ventana gráfica; cambiar el ancho o la fuente de un div normal no los simula.

Ejemplos crecientes, decrecientes y redondeados.

El diseño predeterminado utiliza 16 px en una ventana gráfica de 320 px y 32 px en 1600 px, suponiendo una raíz de 16 px. Produce clamp(1rem, calc(0.75rem + 1.25vw), 2rem), con un tamaño modelado de exactamente 24 px a 960 px.

Revertir esos tamaños de puntos finales produce clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Ambos límites permanecen ordenados numéricamente. En cambio, ingresar 20px en ambos anchos produce font-size: 1.25rem; bajo la misma raíz supuesta.

Para 17px a 360px y 23px a 1280px, los coeficientes redondeados a seis decimales producen 17,0000024px en el primer ancho y 20,0000028px en el punto medio del modelo copiado. La tabla redondea estos valores y no afirma que los extremos se alcancen exactamente.

Límites de creación y modelo

Los anchos de las ventanas gráficas son números enteros de 240 a 3840 píxeles CSS, separados por al menos 100px. Los tamaños de fuente son de 1 a 256 píxeles CSS y los tamaños de raíz asumidos son de 8 a 32 píxeles CSS por rem, con hasta dos decimales. Los signos, las unidades en los campos, las agrupaciones, los exponentes y el exceso de precisión se rechazan en lugar de corregirse silenciosamente.

La herramienta crea una declaración font-size para un elemento distinto de la raíz con rem y vw. No importa CSS arbitrario, crea escalas tipográficas, usa unidades de contenedor, sube fuentes ni modifica los estilos de la raíz. El límite de error corresponde al modelo aritmético finito, no a la rasterización del navegador.

La muestra usa el tamaño calculado en píxeles y se ajusta dentro de la tarjeta. No simula una ventana gráfica ni demuestra que el CSS tendrá el mismo resultado en tu página. La fuente, la raíz, la ventana y la precisión del navegador pueden cambiar el resultado.

Las unidades de ventana gráfica y rem combinadas no resultan automáticamente accesibles al cambiar el tamaño del texto. Pruebe la página de recepción con el texto del navegador y la configuración de zoom. La herramienta no proporciona ninguna insignia universal WCAG, promesa de coincidencia de píxeles fija o duplicación garantizada de la fuente con un zoom del 200%.

Autoría numérica local sin configuración guardada

La herramienta no sube valores, solicita fuentes remotas, guarda borradores, crea enlaces con ajustes ni añade telemetría con los valores. El usuario inicia la copia. Los servicios existentes, las extensiones y las copias conservadas no están cubiertos por una promesa universal de privacidad o eliminación.