FitText.js 介绍
FitText.js是一款经典的jQuery响应式 标题 文字 插件 。FitText.js可以将 标题 文字 自适应容器的大小,缩放容器时 标题 字体大小随之改变。FitText.js可用于桌面设备、手提电脑、平板电脑和手机等众多设备,非常强大。?
如何使用
首先要在 页面 的头部引入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样式
要确保你的容器有 一个 宽度!
dis play: inline的元素不要有宽度。 dis play: block或 dis play: inline-block的元素需要 一个 宽度。(例如:width: 100%)
position:absolute的元素需要 一个 宽度。
可以不断调整css样式直至你满意为止。
可以为 标题 文字 大小设置 一个 No-js回退的css 代码 。
网站地址 : http://fittextjs.com
GitHub: https://github.com/davatron5000/FitText.js
网站描述: 一款使 文字 填充式自适应的Jquery 插件
FitText.js官方网站
官方网站: http://fittextjs.com
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。