FitText.js 响应式标题文字大小调整 jQuery 插件
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
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论