Comment définir la taille minimale de la police en CSS

Je souhaite définir une taille de police minimale pour chaque élément de ma page HTML.

Par exemple, s’il y a des éléments de taille inférieure à 12px, ils deviendront 12px.
Mais s’il y a des éléments avec une plus grande taille de police que 12px, ils ne changeront pas.

Est-il possible de le faire avec CSS?

Non. Bien que vous puissiez définir une taille de police de base sur le body à l’aide de la propriété font-size , tout ce qui spécifie une taille inférieure après celle-ci remplacera la règle de base de cet élément. Pour faire ce que vous cherchez, vous devrez utiliser Javascript.

Vous pouvez parcourir les éléments de la page et modifier les plus petites fonts en utilisant quelque chose comme ceci:

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

Voici un violon où vous pouvez le voir: http://jsfiddle.net/mifi79/LfdL8/2/

En CSS3, il existe un hack simple mais génial pour cela:

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

C’est parce que la partie statique de calc () définit le minimum. Même si la partie dynamic peut réduire à quelque chose près de 0.

Ce n’est probablement pas exactement ce que vous voulez, mais dans CSS 3, vous pouvez utiliser la fonction max.

Exemple:

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

De cette façon, la taille de la police sera 1em (si 1em> 12px), mais au moins 12px.

Malheureusement, cette fonctionnalité CSS3 n’est pas encore supscope par les navigateurs, mais j’espère que cela changera bientôt!

On dirait que je suis un peu en retard mais pour d’autres avec ce problème essayez ce code

 p { font-size: 3vmax; } 

utiliser la balise que vous préférez et la taille que vous préférez (remplacer le 3)

 p { font-size: 3vmin; } 

est utilisé pour une taille maximale.

Utilisez une requête multimédia. Exemple: Ceci est quelque chose im en utilisant la taille originale est 1.0vw mais quand il frappe 1000 la lettre devient trop petit alors je le redimensionne

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

Ce site sur lequel je travaille n’est pas réactif pour> 500px mais vous pourriez avoir besoin de plus. L’avantage de cette solution est que vous gardez la taille de votre police sans avoir à utiliser des lettres super mini et vous pouvez la garder libre.

Solution 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 } } 

AFAIK c’est pas possible avec CSS simple,
mais vous pouvez faire une opération jQuery assez chère comme:

démo jsbin

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

Au lieu d'utiliser le sélecteur global * je vous suggère (si possible) d'être plus précis avec vos sélecteurs.

À en juger par votre commentaire ci-dessus, vous êtes d’accord avec jQuery – voici:

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

Une façon plus propre de faire cela pourrait être d'avoir une classe "min-font" dans votre CSS qui définit la taille de la police: 12px, et ajoutez simplement la classe à la place:

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