FitText.js

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样式

要确保你的容器有一个宽度！

display: inline的元素不要有宽度。display: block或display: 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

小编说

以上是编程之家为你收集整理的FitText.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。