FitText.js 是一個響應(yīng)式標題文本大小調(diào)整的 jQuery 插件，可以根據(jù)父級元素的寬度靈活的動態(tài)改變字體大小，可將這個插件用于響應(yīng)式頁面設(shè)計的標題文字。

使用方式

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

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

然后就可以調(diào)用插件使你需要的標題文字變?yōu)轫憫?yīng)式文本。

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

經(jīng)過上面的調(diào)用，標題文字變?yōu)轫憫?yīng)式的，默認的字體大小是容器寬度的1/10。

壓縮比例

如果你的標題文字在調(diào)用插件后不夠大，你可以調(diào)整壓縮系數(shù)來調(diào)整字體的大小。該系數(shù)默認值為1，系數(shù)越大字體越小。

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 允許你使用像素為單位為文字設(shè)置 minFontSize 和 maxFontSize。

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

關(guān)于CSS樣式

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

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

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

2、可以不斷調(diào)整CSS樣式直至你滿意為止。

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

不使用jQuery

不依賴 jQuery 的插件，F(xiàn)itText可以不作為jQuery插件使用

• non-jQuery FitText from @adactio

• Angular.js FitText.js from @patrickmarabeas

• AMP-HTML FitText

• FitText UMD by @peacechen

相關(guān)鏈接

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

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