How to set min-font-size in CSS

问题:

I want to set a minimum font size to every element in my HTML page.

For example if there are elements with font-size less then 12px, then they will change to 12px.
But if there are elements with font-size grater then 12px, they will not change.

Is there any way to do it with CSS?

回答1:

No. While you can set a base font size on body using the font-size property, anything after that that specifies a smaller size will override the base rule for that element. In order to do what you are looking to do you will need to use Javascript.

You could iterate through the elements on the page and change the smaller fonts using something like this:

$("*").each( function () {     var $this = $(this);     if (parseInt($this.css("fontSize")) 

Here is a Fiddle where you can see it done: http://jsfiddle.net/mifi79/LfdL8/2/

回答2:

In CSS3 there is a simple but brilliant hack for that:

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

This is because the static part of calc() defines the minimum. Even though the dynamic part might shrink to something near 0.

回答3:

This is probably not exactly what you want, but in CSS 3, you can use the max-function.

Example:

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

That way the font-size will be 1em (if 1em > 12px), but at least 12px.

Unfortunatly this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon!

回答4:

Looks like I'm a bit late but for others with this issue try this code

p { font-size: 3vmax; } 

use whatever tag you prefer and size you prefer (replace the 3)

p { font-size: 3vmin; } 

is used for a max size.

回答5:

Use a media query. Example: This is something im using the original size is 1.0vw but when it hits 1000 the letter gets too small so I scale it up

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

This site I m working on is not responsive for >500px but you might need more. The pro,benefit for this solution is you keep font size scaling without having super mini letters and you can keep it js free.

回答6:

CSS Solution:

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

回答7:

AFAIK it's not possible with plain CSS,
but you can do a pretty expensive jQuery operation like:

jsBin demo

$('*').css('fontSize', function(i, fs){   if(parseInt(fs, 10) 

_{Instead of using the Global Selector * I'd suggest you (if possible) to be more specific with your selectors.}

回答8:

Judging by your above comment, you're OK doing this with jQuery ― here goes:

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

A cleaner way to do this might be to have a "min-font" class in your CSS that sets font-size: 12px, and just add the class instead:

$("*", "body").each(function() {   if ( parseInt($(this).css("font-size"), 10) 

文章来源: How to set min-font-size in CSS