19个优秀的JS库/插件帮你排版出完美网页

设计创意1984 设计创意1984

文字的排版是网页设计中不可或缺的一个重要组成部分，您使用的文字在网页中的大小间距对于整个网页的视觉效果都起着非常重要的作用。它会影响可读性、用户体验，甚至是文章或页面的感知长度之类的因素。

网站设计师必须正确使用排版，以充分传达网站的内容。这一点非常的重要。与网页设计的每个部分几乎一样，有很多工具都可以帮助你来提高网页的用户体验，板式排版也一样。

今天我们搜集分享了20种网页板式排版的JS库/插件，这些将可以帮助你创建超级棒的网页内容排版。其中一些工具的功能超乎你的想象，赶快一起来看看研究研究吧，绝对可以让你事半功倍！

1. FlowType.js

FlowType是一个响应式jquery插件，可帮助您根据特定元素的宽度自动调整字体大小。为了使网站的排版易于阅读，每行应大约包含 45至75个字符。对于大多数仅具有CSS媒体查询的屏幕，这可能很难实现。Flowtype会调整字体大小，以确保无论读者使用的是哪种屏幕或浏览器，每行都有一个完美的字符数。

https://simplefocus.com/flowtype

2. Blast.js

Blast.js允许您执行：印刷动画，并置，样式，搜索和分析。该工具允许您分隔文本以启用印刷操作。它具有内置的字符，单词，句子和元素符号。Blast还匹配短语和自定义正则表达式。

http://velocityjs.org/blast/

3. Textillate.js

Textillate.js是用于创建CSS3文本动画的简单插件。该插件结合了不同的库，以帮助将CSS3动画应用于任何文本。要使用它，您需要做的就是将textillate.js及其依赖项添加到您的项目中。

https://textillate.js.org/

4. Widowtamer.js

Widowtamer.js是一个JavaScript插件，可以自动修复网页上的排版。该插件仅适用于响应站点。

https://responsivedesign.is/resources/typography/widowtamer-js/

5. jQuery WidowFix

jQuery WidowFix是一个jQuery插件，可帮助您修复。它通过在最后两个词之间添加不间断的空格来修复它们。该工具轻巧且易于使用。

https://matthewlein.com/tools/widowfix

6.Slab Text

Slab Text是一个jQuery插件，可帮助您创建大胆的标题。您还可以调整视口宽度的大小，以便无论视口大小如何，标题中的单词组合都将保持在同一行。

https://responsivedesign.is/resources/typography/slab-text/

7. Kerning.js

Kerning.js是一个简单的jQuery脚本，可让您使用真实的CSS规则自动缩放您的Web类型。它没有依赖性，因此当您将其添加到网页并添加一些CSS规则时，页面将被自动美化。

https://www.javascripting.com/view/kerning-js

8. Lettering.js

Lettering.js是用于基本网络排版的jQuery插件。该插件为您提供了完整的控制。使用Lettering.js可以轻松完成的工作包括：字距调整类型，编辑设计和可管理代码。

http://letteringjs.com/

9.React Text Gradient

React Text Gradient是一个很酷的插件，可让您向站点添加文本渐变。这是一个React组件，可使用CSS创建文本渐变。该组件将检测网站背景剪辑是否可用，然后将渐变应用于文本。

https://javier.xyz/react-textgradient/

10. Typed.js

Typed.js是一个JavaScript库，可在浏览器中键入句子，将其删除，然后移至下一个字符串。该工具非常易于使用，您可以创建无限数量的字符串。该图书馆非常适合讲故事。

https://mattboldt.com/demos/typed-js/

11. FitText

FitText是用于扩展 Web类型的jQuery插件。该插件会自动缩放文本，以使其填充父元素的宽度。该插件可确保无论您使用哪种浏览器，页面的布局都不会损坏。

http://fittextjs.com/

12. TypeButter

TypeButter是Web的光学字距调整。此插件可让您创建设计精美的文本。Typebutter还允许您调整标题，并消除字符之间的空格，使文本难以阅读。您需要做的就是安装插件，字体会失去不必要的间距。

https://github.com/hudsonfoo/typebutter

13.Font-to-width

Font-to-width是一个脚本，它允许文本适合其容器。而不是缩放字体大小以使文本适合，而是选择“字体到宽度”的宽度或宽度变体，然后根据需要调整字母和单词。请注意，此脚本用于标题或短文本。它不适用于多行文本。它还在支持亚像素间距的浏览器（例如Chrome）中效果最好。将空格四舍五入为整数值的浏览器将显示四舍五入错误。