FlowType.JS 响应式网页字体间距排版插件 - 资源分享

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

发布于 2017-09-24 字数 3576 浏览 2175 评论 0

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

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
});

相关连接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0