FitText.js 是一個響應式標題文本大小調整的 jQuery 插件，可以根據父級元素的寬度靈活的動態改變字體大小，可將這個插件用于響應式頁面設計的標題文字。

使用方式

首先要在頁面的頭部引入jQuery和jquery.fittext.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.fittext.js"></script>

然后就可以調用插件使你需要的標題文字變為響應式文本。

<script>
  jQuery("#responsive_headline").fitText();
</script>

經過上面的調用，標題文字變為響應式的，默認的字體大小是容器寬度的1/10。

壓縮比例

如果你的標題文字在調用插件后不夠大，你可以調整壓縮系數來調整字體的大小。該系數默認值為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)

最小字體大小和最大字體大小

FitText 允許你使用像素為單位為文字設置 minFontSize 和 maxFontSize。

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

關于CSS樣式

1、要確保你的容器有一個寬度！

• display: inline 的元素不要有寬度。display: block 或 display: inline-block 的元素需要一個寬度。（例如：width: 100%）

• position:absolute 的元素需要一個寬度。

2、可以不斷調整CSS樣式直至你滿意為止。

3、可以為標題文字大小設置一個No-JS回退的CSS代碼。

不使用jQuery

不依賴 jQuery 的插件，FitText可以不作為jQuery插件使用

• non-jQuery FitText from @adactio

• Angular.js FitText.js from @patrickmarabeas

• AMP-HTML FitText

• FitText UMD by @peacechen

相關鏈接

• Github地址：https://github.com/davatron5000/FitText.js

• 項目地址：http://fittextjs.com/