¿Existe el tamaño mínimo de fuente y el tamaño máximo de fuente?

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

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

El CSS para el div padre:

.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 el 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.

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

Puede usar @mediaconsultas para realizar 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 fuente en un valor pequeño específico si la ventana es muy estrecha.

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 de fuente mínimo en 7px y lo amplifica en .5vw dependiendo del ancho de la ventana gráfica.

¡Buena suerte!

Funciona bien con CSS.

Pasé por los mismos problemas y los solucioné de la siguiente manera.

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

El resultado a continuación es que se ajusta solo en pantallas por debajo de 960px pero mantiene un tamaño fijo arriba. Solo un recordatorio, no olvide agregar el documento 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 te ayude!

Llego un poco tarde aquí, no me dan mucho crédito por eso, 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 esta propiedad CSS . No sé por qué, pero creo que es porque tienen miedo de un mal uso de esta propiedad, pero no encuentro ningún caso de uso en el que pueda ser un problema grave.

Como sea, cuales son las soluciones?

Dos herramientas nos permitirán hacer eso: media queries y vw property

1) Existe una solución "tonta" que consiste en realizar una consulta de medios por cada paso que damos en nuestro css, cambiando la fuente de una cantidad fija a otra cantidad fija. Funciona, pero es muy aburrido y no tiene un aspecto lineal suave.

2) Como explicó AlmostPitt, 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 realmente genial y funciona en la mayoría de los casos . No requiere ninguna consulta de medios, solo tiene que dedicar algo de 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 fije 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 tienes un cliente muy aburrido (como yo) que quiere absolutamente que un título sea de una línea y no más. Si usó la solución AlmostPitt, entonces tiene problemas porque su fuente seguirá creciendo, y si tiene un contenedor de ancho fijo (como bootstrap que se detiene en 1140px o algo en ventanas grandes). Aquí le sugiero que utilice 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, hazlo

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

¡Entonces es perfectamente lineal y su tamaño de fuente deja de crecer! Tenga en cuenta que no necesita poner su propiedad css anterior (calc ...) en una consulta de medios en 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ía problemas para llegar a la pantalla completa y, después de todo, no es ciencia espacial.

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

En realidad, esto se propone en CSS4

Borrador de trabajo en el W3C

Citar:

Estas dos propiedades permiten que un sitio web o un usuario requieran que el tamaño de fuente de un elemento se fije dentro del rango proporcionado con estas dos propiedades. Si el valor calculado font-size 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á el 5% del ancho de la ventana gráfica, pero nunca menor de 10 píxeles y nunca mayor de 18 píxeles.

Desafortunadamente, esta función aún no está implementada en ninguna parte (ni siquiera en caniuse.com).

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

Hice una demostración usando propiedades personalizadas de CSS (variables CSS) para controlar fácilmente los tamaños de fuente mínimo y máximo.

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);
}

Obtuve algunos resultados suaves 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 usar Sass para controlar los tamaños de fuente mínimo y máximo. He aquí una brillante solución 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);
}

Tenga en cuenta que no se recomienda configurar el tamaño de fuente con px debido a problemas de accesibilidad :

"No se puede definir el tamaño de fuente en px, porque el usuario no puede cambiar el tamaño de fuente en algunos navegadores. Por ejemplo, los usuarios con visión limitada pueden desear establecer el tamaño de fuente mucho más grande que el tamaño elegido por un diseñador web". (ver https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Un enfoque más accesible es establecer font-size: 100%en el html, que respeta la configuración de tamaño predeterminada del usuario , y LUEGO usar porcentajes o unidades relativas al cambiar el tamaño ( emo rem), por ejemplo, con una consulta @media.

(ver https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

Sí, parece que existen algunas restricciones por parte de algunos navegadores en SVG. La herramienta de desarrollo 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/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>