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

99

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.

Toby van Kempen
fuente
Primera vez que veo vw usado en fuentes jajaja
Brandito

Respuestas:

60

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.

Jukka K. Korpela
fuente
Si estoy en lo correcto, la información en su enlace dice que las consultas de medios ejecutarán el CSS especificado cuando se cumpla una condición, en este caso de su enlace, la condición sería max-width:600px;. ¿Estoy en lo correcto o no entendí correctamente la información detrás del enlace?
Toby van Kempen
4
@Toby van Kempen: Tiene razón, sin embargo, el ancho máximo en este caso se refiere al tamaño de la ventana gráfica y no al tamaño de un elemento arbitrario. Si necesita cambiar CSS según el estilo de algún elemento arbitrario, entonces no podrá usar consultas de medios para hacerlo. Necesitarás un guión.
BoltClock
@BoltClock Entonces, ¿se @mediarefiere a la ventana del navegador? ¿Cómo sabrá que quiero que mi tamaño de fuente sea, digamos, 20px cuando el div principal o la ventana del navegador tiene un tamaño específico, en px?
Toby van Kempen
@Toby van Kempen: Siempre se referirá a la ventana del navegador, de ahí los "medios" en "consultas de medios".
BoltClock
1
Ah, ya veo. Entonces, si estoy en lo correcto, si escribo @media (width:600px), ¿ejecutará el siguiente script @mediauna vez que el ancho del navegador sea equivalente a 600px?
Toby van Kempen
110

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!

Casi Pitt
fuente
2
¡¡¡DIOS MIO!!! Durante los últimos 3 días he estado jugando con números y diferentes formas de hacer esto. Déjame decirte que nada realmente funcionó como quisiera. Luego, me encuentro con tu respuesta, la introduzco en mi css y "HORAYYYY" funciona ... Respuesta impresionante, Pitt. Gracias.
Jueves
Un gran truco para un tamaño de fuente mínimo. Me pregunto si se puede hacer algo similar al máximo ... Podría tener algo que ver con la idea de que cualquier negativo sería tratado como 0. ¿Algunos anidados calco algo así?
Lazar Ljubenović
2
Invertirlo, por lo que el tamaño de fuente: calc (12px - .5vw)
roberrrt-s
Esto no funciona correctamente con LESS. Supongo que la calc()declaración se procesa cuando se compila LESS y se resuelve en un pxvalor simple . Cambiar el tamaño no se vuelve a calcular. ¿Ideas o pensamientos?
Abogado del Diablo
Publicado aquí: stackoverflow.com/questions/49500754/…
Devil's Advocate
63

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!

Willy VAN INGEN
fuente
2
¡Esta debería ser la MEJOR respuesta!
KaKa
¿Por qué tienes "todos" en cada fila?
tibi
@tibi all se refiere al tipo de medio (o: DÓNDE aplicar). las opciones son todas, pantalla, impresión y voz. todo es predeterminado, por lo que es un poco obsoleto aquí. consulte los documentos de mdn .
honk 31 de
¡Si! ¡Funciona perfectamente! Lo que quería era un tamaño de fuente MAX y funciona perfectamente, gracias.
todbott
9

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.

Alburkerk
fuente
¿Puede sugerir una fórmula para encontrar los valores correctos para calc () que devuelvan lo mismo que max(*a*px,, *b*vw)? Porque en mi caso, no puedo tolerar una adición ingenua porque el resultado es demasiado grande, pero parece que estás sugiriendo que de alguna manera podría reducir a y b por encima de las cantidades ingenuas; tengo problemas para calcular las matemáticas y necesitan una solución general, no solo un caso específico.
Michael
La única buena explicación que se me ocurrió fue con una imagen, así que no puedo ayudarlo a través de los comentarios, le sugiero que cree una nueva pregunta
Alburkerk
6

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

roberrrt-s
fuente
4
Excelente. Así que tengo que dejar de trabajar en este proyecto durante unos años hasta que se implemente ...: '- (
Michael
3

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);
}
Dannie Vinther
fuente
2

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;
    }
}
Chris Topillogical
fuente
¿En qué se diferencia de la otra respuesta?
user193661
2

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);
}
mateo
fuente
1

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/ )

DepecheCode
fuente
0

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>
Padina
fuente