html5 - sirve - Cómo establecer min-font-size en CSS

style="font-size:12px:"

Question

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

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

¿Hay alguna manera de hacerlo con CSS?

Answer 1

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 font-size: 12px, y simplemente agregue la clase en su lugar:

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

Answer 2

AFAIK no es posible con CSS simple,
pero puedes 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 Global Selector * , le sugiero que (si es posible) sea más específico con sus selectores.}

Answer 3

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.

Answer 4

Parece que estoy un poco tarde, pero para otros con este problema prueba 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 usa para un tamaño máximo.

Answer 5

Probablemente esto no sea exactamente lo que quiere, pero en CSS 3, puede usar la función max.

Ejemplo:

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

De esta forma, el tamaño de letra será 1em (si 1em> 12px), pero al menos 12px.

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

Answer 6

Solución de 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
  }
}

Answer 7

Use 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 es demasiado pequeña, así que lo amplío

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

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

Answer 8

No. Aunque puede establecer un tamaño de fuente base en el body utilizando la propiedad de font-size , cualquier elemento posterior que especifique un tamaño más pequeño anulará la regla base para ese elemento. Para hacer lo que estás buscando, necesitarás usar Javascript.

Podría recorrer los elementos en 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 Fiddle donde puedes verlo hecho: http://jsfiddle.net/mifi79/LfdL8/2/