html - español - ¿Existe tal cosa como min-font-size y max-font-size?

sass responsive font size (9)

Estoy tratando de hacer que una fuente en un div responda a la ventana del navegador. Hasta ahora, ha funcionado perfectamente, pero el div principal tiene un max-width de 525px . Cambiar el tamaño del navegador aún más no hará que la fuente deje de cambiar el tamaño. Esto me ha hecho preguntarme si existe algo como min-font-size o max-font-size , y si tal cosa no existe, si hay una manera de lograr algo similar.

Pensé que el uso de porcentajes en font-size funcionaría, pero el fragmento de texto no se escalaría de acuerdo con el div principal. Esto es lo que tengo:

El CSS para el div principal:

.textField{ background-color:rgba(88, 88, 88, 0.33); width:40%; height:450px; min-width:200px; max-width:525px; z-index:2; }

El CSS para la pieza de texto en cuestión:

.subText{ position:relative; top:-55px; left:15px; font-family:"news_gothic"; font-size:1.3vw; font-size-adjust:auto; width:90%; color:white; z-index:1; }

He buscado durante bastante tiempo en Internet, pero fue en vano.

Esto en realidad se está proponiendo en CSS4

Borrador de trabajo en el W3C

Citar:

Estas dos propiedades permiten que un sitio web o usuario requiera que el tamaño de letra de un elemento se sujete dentro del rango proporcionado con estas dos propiedades. Si el tamaño de fuente de valor calculado está fuera de los límites creados por font-min-size y font-max-size, el valor de uso de font-size se fija a los valores especificados en estas dos propiedades.

Esto realmente funcionaría de la siguiente manera:

.element { font-min-size: 10px; font-max-size: 18px; font-size: 5vw; // viewport-relative units are responsive. }

Esto significaría literalmente que el tamaño de la fuente será del 5% del ancho de la ventana gráfica, pero nunca será menor de 10 píxeles y nunca será mayor de 18 píxeles.

Lamentablemente, esta función aún no está implementada en ningún lugar (ni siquiera en caniuse.com).

Funciona bien con CSS.

Pasé por los mismos problemas y lo arreglé como sigue.

Use un tamaño fijo de "px" para obtener el tamaño máximo a un ancho específico y superior. Luego, para diferentes anchos más pequeños, use un "vw" relativo como un porcentaje de la pantalla.

El resultado a continuación es que se ajusta en pantallas de menos de 960px pero mantiene un tamaño fijo arriba. Solo un recordatorio, para no olvidar agregar el doc. Html en el encabezado:

<meta name="viewport" content="width=device-width">

Ejemplo en CSS:

@media all and (min-width: 960px) { h1{ font-size: 50px; } } @media all and (max-width: 959px) and (min-width: 600px) { h1{ font-size: 5vw; } } @media all and (max-width: 599px) and (min-width: 50px) { h1{ font-size: 6vw; } }

¡Espero que ayude!

Llego un poco tarde aquí, no me agradan mucho, solo estoy haciendo una combinación de las respuestas a continuación porque me vi obligado a hacer eso para un proyecto.

Entonces, para responder a la pregunta: no existe tal propiedad de CSS . No sé por qué, pero creo que es porque temen que se abuse de esta propiedad, pero no encuentro ningún caso de uso donde pueda ser un problema grave.

Lo que sea, ¿cuáles son las soluciones?

Dos herramientas nos permitirán hacer eso: consultas de medios y propiedad vw

1) Hay una solución "tonta" que consiste en hacer una consulta de medios para cada paso que hagamos en nuestro CSS, cambiando la fuente de un monto fijo a otro monto fijo. Funciona, pero es muy aburrido de hacer, y no tiene un aspecto lineal suave.

2) Como AlmostPitt explicó, hay una solución brillante para los mínimos:

font-size: calc(7px + .5vw);

El mínimo aquí sería 7px además del 0.5% del ancho de la vista. Eso ya es genial y funciona en la mayoría de los casos . No requiere consulta de medios, solo tiene que dedicar un tiempo a encontrar los parámetros correctos.

Como notó que es una función lineal, las matemáticas básicas le enseñan que dos puntos ya le encuentran los parámetros. Luego, simplemente arregle el tamaño de fuente en px que desea para pantallas muy grandes y para la versión móvil, luego calcule si desea hacer un método científico. Pensamiento, no es absolutamente necesario y puedes intentarlo.

3) Supongamos que tiene un cliente muy aburrido (como yo) que quiere absolutamente un título para ser una línea y nada más. Si usó la solución AlmostPitt, entonces tendrá problemas porque su fuente seguirá creciendo, y si tiene un contenedor de ancho fijo (como bootstrap parado a 1140 px o algo así en grandes ventanas). Aquí le sugiero que use también una consulta de medios. De hecho, puede encontrar la cantidad máxima de px que puede manejar en su contenedor antes de que el aspecto se vuelva no deseado (pxMax). Este será tu máximo. Entonces solo tiene que encontrar el ancho de pantalla exacto que debe detener (wMax). (Te dejo invertir una función lineal por tu cuenta).

Después de eso solo hazlo

@media (min-width: [wMax]px) { h2{ font-size: [pxMax]px; } }

¡Entonces es perfectamente lineal y el tamaño de fuente deja de crecer! Tenga en cuenta que no necesita colocar su propiedad CSS anterior (calc ...) en una consulta de medios bajo wMax porque la consulta de medios se considera más importante y sobrescribirá la propiedad anterior.

No creo que sea útil hacer un fragmento para esto, ya que tendrías problemas para llegar a la pantalla completa y no es ciencia de cohetes después de todo.

Espero que esto pueda ayudar a otros, y no olvide agradecer a AlmostPitt por su solución.

No, no hay propiedad de CSS para el tamaño de fuente mínimo o máximo. Los navegadores a menudo tienen una configuración para el tamaño mínimo de fuente, pero eso está bajo el control del usuario, no de un autor.

Puede usar las consultas de @media para hacer algunas configuraciones de CSS dependiendo de cosas como la pantalla o el ancho de la ventana. En tales configuraciones, puede, por ejemplo, establecer el tamaño de la fuente en un pequeño valor específico si la ventana es muy estrecha.

Obtuve algunos resultados sin problemas con estos. Fluye suavemente entre los 3 rangos de ancho, como una función continua por partes.

@media screen and (min-width: 581px) and (max-width: 1760px){ #expandingHeader { line-height:5.2vw; font-size: 5.99vw; } #tagLine { letter-spacing: .15vw; font-size: 1.7vw; line-height:1.0vw; } } @media screen and (min-width: 1761px){ #expandingHeader { line-height:.9em; font-size: 7.03em; } #tagLine { letter-spacing: .15vw; font-size: 1.7vw; line-height:1.0vw; } } @media screen and (max-width: 580px){ #expandingHeader { line-height:.9em; font-size: 2.3em; } #tagLine { letter-spacing: .1em; font-size: .65em; line-height: .10em; } }

Puede hacerlo utilizando una fórmula e incluyendo el ancho de la ventana gráfica.

font-size: calc(7px + .5vw);

Esto establece el tamaño mínimo de fuente en 7px y lo amplifica en .5vw dependiendo del ancho de la ventana gráfica.

¡Buena suerte!

Puede usar Sass para controlar los tamaños de fuente mínimo y máximo. Aquí hay una solución brillante de Eduardo Boucas.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) { $responsive-unitless: $responsive / ($responsive - $responsive + 1); $dimension: if(unit($responsive) == ''vh'', ''height'', ''width''); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#{$dimension}: #{$min-breakpoint}) { font-size: $min; } @if $max { $max-breakpoint: $max / $responsive-unitless * 100; @media (min-#{$dimension}: #{$max-breakpoint}) { font-size: $max; } } @if $fallback { font-size: $fallback; } font-size: $responsive; } .limit-min { @include responsive-font(3vw, 20px); } .limit-min-max { @include responsive-font(3vw, 20px, 50px); }

Rucksack es brillante, pero no necesariamente tienes que recurrir a herramientas de compilación como Gulp o Grunt, etc.

Hice una demo usando CSS Custom Properties (CSS Variables) para controlar fácilmente los tamaños de letra min y max.

Al igual que:

* { /* Calculation */ --diff: calc(var(--max-size) - var(--min-size)); --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */ } h1 { --max-size: 50; --min-size: 25; font-size: var(--responsive); } h2 { --max-size: 40; --min-size: 20; font-size: var(--responsive); }

Sí, parece que hay algunas restricciones por parte de algún navegador en SVG. El developertool lo restringe a 8000px; El siguiente gráfico generado dinámicamente falla, por ejemplo, en Chrome.

Pruebe http://www.xn--dddelei-n2a.de/2018/test-von-svt/