FitText.js是一款非常经典的jQuery响应式标题文字插件。FitText可以灵活的动态改变 font-sizes 字体大小。可将这个插件用于响应式页面设计的标题文字。
如何使用
首先要在页面的头部引入jQuery和jquery.fittext.js文件。
<script src="http://libs.useso.com/js/jquery/1.9.1/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样式
-
要确保你的容器有一个宽度！
- display: inline的元素不要有宽度。display: block或display: inline-block的元素需要一个宽度。（例如：width: 100%）
- position:absolute的元素需要一个宽度。
- 可以不断调整CSS样式直至你满意为止。
- 可以为标题文字大小设置一个No-JS回退的CSS代码。
不使用jQuery版本的FitText
FitText可以不作为jQuery插件使用：
