CSS no tiene max-font-size, así que si necesitamos algo que haga algo en ese sentido, tenemos que complicarnos.
¿Por qué lo necesitarías en absoluto? Bien, font-size en sí mismo se puede configurar de forma dinámica. Por ejemplo, font-size: 10vw;. Eso es usar “unidades de ventana gráfica” para dimensionar el tipo, que se hará más grande y más pequeño con el tamaño de la ventana del navegador. Si tuvieramos max-font-size, podríamos limitar su tamaño (de manera similar, la otra dirección con min-font-size).
Una solución es utilizar una consulta de medios en un determinado punto de interrupción del tamaño de la pantalla que establece el tamaño de fuente en una unidad no relativa.
body {
font-size: 3vw;
}
@media screen and (min-width: 1600px) {
body {
font-size: 30px;
}
}Hay un concepto denominado bloqueos CSS que se vuelve más elegante aquí, escalando lentamente un valor entre un mínimo y un máximo. Hemos cubierto eso. Puede ser como …
body {
font-size: 16px;
}
@media screen and (min-width: 320px) {
body {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
body {
font-size: 22px;
}
}También cubrimos cómo se ha vuelto (o se volverá) mucho más simple.
Hay un max() función en CSS, por lo que nuestro ejemplo anterior se convierte en una línea:
font-size: max(30vw, 30px);O duplícalo con un mínimo y un máximo:
font-size: min(max(16px, 4vw), 22px);Que es idéntico a:
font-size: clamp(16px, 4vw, 22px);La compatibilidad del navegador para estas funciones es bastante escasa mientras escribo esto, pero Chrome la tiene actualmente. Llegará allí, pero mire la primera opción en este artículo si la necesita ahora.
Ahora que tenemos estas funciones, me parece poco probable que alguna vez obtengamos min-font-size y max-font-size en CSS, ya que las funciones son casi más claras tal como están.