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