web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
文字效果
jQuery.fontFlex-轻量级jQuery响应式字体插件
分类：
文字效果
日期：
2024-05-14
点击(4)
评论(0)
演 示
免费下载
简介
使用该响应式字体插件需要在页面中引入jquery和jQuery.fontFlex.js文件。 ```html <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQuery.fontFlex.js"></script> ``` ##### 初始化插件 你可以首先在CSS文件中为body元素定义字体大小和行高，例如font-size:1em;line-height:150%;。如果浏览器被禁用了javascript，页面中的字体使用CSS设置的大小和行高。然后你可以通过该插件来制作字体的响应式效果，在页面DOM元素加载完毕之后，通过fontFlex()方法来初始化该响应式字体插件。 ```html $(function() { // 所有元素 $('body').fontFlex(14, 20, 70); // H1元素 $('h1').fontFlex(24, 36, 70); }); ``` #### 配置参数 jQuery.fontFlex响应式字体插件有3个可用的配置参数： - min：最小的font-size，单位像素。 - max：最大的font-size，单位像素。 - mid：范围缓冲区，设置在60-70之间效果最佳。值越小产生的字体越大，反之字体越小，可以根据实际情况来调整这个参数。 #### 浏览器兼容 jQuery.fontFlex响应式字体插件可以在以下浏览器中正常工作： - Google Chrome - Safari ( 桌面和移动手机 ) - Internet Explorer ( 8, 9, 10+ ) - Firefox
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
