jQuery.fontFlex是一款轻量级jQuery响应式字体插件。它可以在浏览器或容器的尺寸发生改变时动态修改字体的大小,适合于在各种响应式布局中显示文字。
使用方法
使用该响应式字体插件需要在页面中引入jquery和jQuery.fontFlex.js文件。
<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()
方法来初始化该响应式字体插件。
$(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
jQuery.fontFlex响应式字体插件的github地址为:https://github.com/nathco/jQuery.fontFlex