FitText.js 响应式标题文字大小调整 jQuery 插件

发布于 2017-07-15 10:41:10 字数 2185 浏览 2360 评论 0

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: blockdisplay: inline-block 的元素需要一个宽度。(例如:width: 100%)
  • position:absolute 的元素需要一个宽度。

2、可以不断调整CSS样式直至你满意为止。

3、可以为标题文字大小设置一个No-JS回退的CSS代码。

不使用jQuery

不依赖 jQuery 的插件,FitText可以不作为jQuery插件使用

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文