Implement a max-font-size style rule with CSSjavascriptjquery - Stack Overflow

admin管理员组

文章数量:1391987

I am using this code to dynamically resize text:

function fontResize(){
   $('.features').css('font-size', ($(window).width()/100) + 'px');
}

fontResize();
$(window).resize( function () {fontResize()});

This works great for pulling the browser inwards but when i'm stretching the screen out on my 21" iMac, the text is too big for a set size DIV i have. how can i implement a solution whereby i can cap the maximum font size on the text. Will i be able to override this function above and put a max-font-size of 13px?

Thanks

I am using this code to dynamically resize text:

function fontResize(){
   $('.features').css('font-size', ($(window).width()/100) + 'px');
}

fontResize();
$(window).resize( function () {fontResize()});

This works great for pulling the browser inwards but when i'm stretching the screen out on my 21" iMac, the text is too big for a set size DIV i have. how can i implement a solution whereby i can cap the maximum font size on the text. Will i be able to override this function above and put a max-font-size of 13px?

Thanks

• javascript
• jquery
• css
• font-size

Share Improve this question Follow edited Jul 30, 2013 at 18:19 benhowdle89 asked Jul 14, 2011 at 22:14 benhowdle89benhowdle89 37.5k7474 gold badges207207 silver badges340340 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

function fontResize(){
   var size = $(window).width()/100;
   if ( size < 13 )
       $('.features').css('font-size', size + 'px');
}

You could implement a sizeRange to define maximum and minimum font sizes.

function fontResize(){
  var sizeRange = [6, 13];  
  var size = $(window).width()/100;

  if ( size <= sizeRange[1] && size >= sizeRange[0] ) {
    $('.features').css('font-size', size + 'px');
  } else {
    // font-size out of range
  }
}

本文标签： Implement a maxfontsize style rule with CSSjavascriptjqueryStack Overflow