FlowType.JS 响应式网页字体间距排版插件

发布于 2017-09-24 11:10:40 字数 2847 浏览 2639 评论 0

在理想的情况下，最易读的版式包含每行的字符在45和75之间。所有的屏幕宽度只用 CSS 媒体查询是很难完成的。FlowType.JS 简化了这一困难，基于特定元素的宽度改变字体大小和随后的行高的，这使得在任何屏幕都有完美的排版。

可选参数

设置最小和最大的阈值来控制 FlowType.JS 应用的特殊元素宽度，在这个例子中，FlowType.JS 将停止调整大小的文本元素，一旦元素的宽度小于500px或大于1200px。

$('body').flowtype({
   minimum : 500,
   maximum : 1200
});

设置最大和最小字体大小阈值控制魔法在特定的字体大小的flowtype.js。在这个例子中，FlowType.JS将停止调整大小的文本一旦字体大小变得小于或大于40px 12px。

$('body').flowtype({
   minFont : 12,
   maxFont : 40
});

Font-size

使用 fontratio 变量设置自己的字体大小。使用 fontratio 时，增加值使字体较小（反之亦然）。

注：因为每个字体都是不同的，你需要调整字体大小和你的最终产品，要确保你的字符数是在推荐的范围。

$('body').flowtype({
   fontRatio : 30
});

Line-height

在 V1.0 版本的时候，我们的插件设置像素特定行的高度。我们收到许多反馈，设置一个特定的行高度是非常危险的。那么，我们做了什么？我们删除线高度支持 v1.1。我现在该怎么办？很简单：用无单位线高度在你的CSS。它会自动根据字体大小进行更改。这里有一个我们建议的行高的例子：

line-height: 1.45;

开始使用

安装 FlowType.JS

使用 FlowType，你将需要将 jQuery 和 flowtype.js 脚本文件引入到你的项目中。

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="flowtype.js"></script>

设置基本的样式

确保字体是灵活的 FlowType.JS 准备。从这个CSS和必要的更改：

body {
   font-size: 18px;
}

h1,h2,h3,h4,h5,h6,p {
   line-height: 1.45;
}

h1 { font-size: 4em; }
h2 { font-size: 3em; }
h3 { etc...

注意：在CSS文件中设置一个特定的字体大小将确保您的网站仍然可以访问，以防您的查看器禁用JavaScript。这些数字将被重写为FlowType.JS更新字体大小号内联。

调用 FlowType.JS

开始简单的调用 FlowType.JS 在你的网页的 body 元素上：

$('body').flowtype();

自定义参数

您很可能希望更改默认设置。要做到这一点，只需在代码中包含这些选项并进行调整即可：

$('body').flowtype({
   minimum   : 500,
   maximum   : 1200,
   minFont   : 12,
   maxFont   : 40,
   fontRatio : 30
});

注意：当使用 FlowType.JS时，它只会执行它的调用元素，子元素是在关闭文件的调用中指定的元素。例如，如果你有 <p> 在一个 <article> 里面，你在 <p> 上调用FlowType.JS，它只会更新 <p> 而不会更新 <article> 。但是，如果你在 <article> 上调用FlowType.JS，那么整个内容包括 <article> 都会更新。我们相信这可以对你有利。所以，调整和改变，因为你觉得必要：

$('body').flowtype({
   minimum   : 500,
   maximum   : 1200,
   minFont   : 12,
   maxFont   : 40,
   fontRatio : 30
}),
$('article').flowtype({
   fontRatio : 36
}),
$('.featured-article').flowtype({
   minFont   : 12,
   fontRatio : 20
}),
$('.side-stories').flowtype({
   minFont   : 16,
   fontRatio : 30
});