FitText 從此擺脫擾人的 font-size

qr code generator 在新的 Response Design中 常常會因為各種 顯示器的關係

 

當您一切都是 Full Screen的時候,卻因為 font-size在 media query的設置問題,而產生疊字等很醜的情況發生,

 

好在有 fitText

<以下使用說明摘自 https://github.com/davatron5000/FitText.js >

 

FitText.js, a jQuery plugin for inflating web type

FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.

How it works

Here is a simple FitText setup:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

Your text should now fluidly resize, by default: Font-size = 1/10th of the element’s width.

The Compressor

If your text is resizing poorly, you’ll want to turn tweak up/down “The Compressor”. It works a little like a guitar amp. The default is 1.

jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up   (resizes more aggressively)
jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively)

This will hopefully give you a level of “control” that might not be pixel perfect, but resizes smoothly & nicely.

minFontSize & maxFontSize

FitText now allows you to specify two optional pixel values: minFontSize and maxFontSize. Great for situations when you want to preserve hierarchy.

jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

CSS FAQ

  • Make sure your container has a width!
    • display: inline elements don’t have a width. Use display: block OR display: inline-block+ a specified width (i.e. width: 100%).
    • position:absolute elements need a specified width as well.
  • Tweak until you like it.
  • Set a No-JS fallback font-size in your CSS.

Don’t use jQuery?

That’s okay. Check out these handy non-jQuery versions maintained by other people.

Changelog

  • v 1.2 – Added onorientationchange event
  • v 1.1 – FitText now ignores font-size and has minFontSize & maxFontSize options
  • v 1.0.1 – Fix for broken font-size.
  • v 1.0 – Initial Release

In Use:

If you want more exact fitting text, there are plugins for that! We recommend checking out BigText by Zach Leatherman or SlabText by Brian McAllister.

Download, Fork, Commit.

If you think you can make this better, please Download, Fork, & Commit. We’d love to see your ideas.

 Move this Page to Mobile 

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *