Cómo establecer el tamaño mínimo de fuente en CSS

Quiero establecer un tamaño de fuente mínimo para cada elemento de mi página HTML.

Por ejemplo, si hay elementos con un tamaño de fuente inferior a 12 px, cambiarán a 12 px.
Pero si hay elementos con un tamaño de fuente más grande que 12px, no cambiarán.

¿Hay alguna forma de hacerlo con CSS?

No. Si bien puede establecer un tamaño de fuente base al bodyusar la font-sizepropiedad, cualquier cosa posterior que especifique un tamaño más pequeño anulará la regla base para ese elemento. Para hacer lo que busca, necesitará utilizar Javascript.

Puede iterar a través de los elementos de la página y cambiar las fuentes más pequeñas usando algo como esto:

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

Aquí hay un violín donde puedes verlo hecho: http://jsfiddle.net/mifi79/LfdL8/2/

En CSS3 hay un truco simple pero brillante para eso:

font-size:calc(12px + 1.5vw);

Esto se debe a que la parte estática de calc () define el mínimo. Aunque la parte dinámica puede reducirse a algo cercano a 0.

A mediados de diciembre de 2019, la función CSS4 min / max es exactamente lo que desea:
(pise con cuidado, esto es muy nuevo, los navegadores más antiguos (también conocidos como IE y msEdge) aún no lo admiten)
(compatible a partir de Chromium 79 y Firefox v75)

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

Ejemplo:

blockquote {
    font-size: max(1em, 12px);
}

De esa manera, el tamaño de la fuente será 1em (si 1em> 12px), pero al menos 12px.

Desafortunadamente, esta característica increíble de CSS3 aún no es compatible con ningún navegador, ¡pero espero que esto cambie pronto!

Editar:

Esto solía ser parte de CSS3, pero luego fue reprogramado para CSS4.
A partir del 11 de diciembre de 2019 , el soporte llegó en Chrome / Chromium 79 (incluido en Android y en Android WebView) y, como tal, también en Microsoft Chredge, también conocido como Anaheim, incluidos Opera 66 y Safari 11.1 (incluido iOS).

Parece que llegué un poco tarde, pero para otras personas con este problema, pruebe este código

p { font-size: 3vmax; }

use la etiqueta que prefiera y el tamaño que prefiera (reemplace el 3)

p { font-size: 3vmin; }

se utiliza para un tamaño máximo.

Utilice una consulta de medios. Ejemplo: Esto es algo que estoy usando, el tamaño original es 1.0vw, pero cuando llega a 1000, la letra se vuelve demasiado pequeña, así que la amplío.

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

Este sitio en el que estoy trabajando no responde a más de 500 px, pero es posible que necesite más. El beneficio profesional de esta solución es que mantiene la escala del tamaño de la fuente sin tener letras súper mini y puede mantenerlo gratis.

CSS tiene una función clamp () que mantiene el valor entre el límite superior e inferior. La función clamp () permite la selección del valor medio en el rango de valores entre los valores mínimo y máximo definidos.

Simplemente toma tres dimensiones:

1. Valor mínimo.
2. Elemento de lista
3. Valor preferido Valor máximo permitido.

intente con el código a continuación y verifique el cambio de tamaño de la ventana, que cambiará el tamaño de fuente que ve en la consola. Establezco el valor máximo 150pxy el valor mínimo 100px.

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

Solución CSS:

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

Por si acaso si algunos necesitan scss mixin:

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

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

AFAIK, no es posible con CSS simple,
pero puede hacer una operación jQuery bastante costosa como:

jsBin demo

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{En lugar de utilizar el Selector global * , le sugiero (si es posible) que sea más específico con sus selectores.}

Las propiedades font-min-sizey font-max-sizeCSS se eliminaron de la especificación de nivel 4 del módulo de fuentes CSS (y nunca se implementaron en los navegadores AFAIK). Y el Grupo de Trabajo de CSS reemplazó los ejemplos de CSS con los font-size: clamp(...)que aún no tienen el mayor soporte de navegador, por lo que tendremos que esperar a que los navegadores lo admitan. Vea el ejemplo en https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples .

A juzgar por su comentario anterior, está bien haciendo esto con jQuery, aquí va:

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

Una forma más limpia de hacer esto podría ser tener una clase "min-font" en su CSS que establezca el tamaño de fuente: 12px, y simplemente agregue la clase en su lugar:

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});

Funcionará perfectamente con 50px. Que actuará como estático y, por lo tanto, como ancho mínimo.

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