简介
Esty 是一个能够帮助开发者快速实现 Web 页面中文排版、排版调整、字体选择等功能的 NPM 包。它通过基于 CSS3 的支持方法，使得设计师和前端开发者能够快速、轻松地完成排版工作。Esty 的特点是可定制、易扩展，使用简单。
在本篇文章中，我们会详细讲解如何安装、使用 Esty 包，以及如何利用 Esty 实现中文排版等功能。如果你正在学习前端开发，或者你是一名设计师，那么本篇文章定会对你有指导意义。
安装
在使用 Esty 前，需要先安装它。在终端中输入以下命令：
npm install esty
这时候，NPM 会开始安装 Esty 包，并将它安装到你的项目中。
使用
在你的项目中，你需要先加载 Esty。在你的 HTML 文件中，你需要增加以下代码：
<link rel="stylesheet" href="node_modules/esty/dist/esty.min.css">
这样，当浏览器加载这个 HTML 文件时，它会自动加载 esty.min.css 文件。
中文排版示例
接下来，我们可以试着使用 Esty 来排版一些中文。以下是一个例子：
<div class="sty-text-large stylize">
<p>醒来的清晨，欣赏早晨美好的一天。</p>
<p>晴空万里，阳光明媚，一切尽在掌握中。</p>
</div>在这个例子中，我们定义了一个 div 元素，并给它设置了两个段落（p）元素。我们还增加了 .sty-text-large 和 .stylize 两个类名，这两个类名会根据我们设定的样式使得我们的中文内容看起来更加美观。
这个例子使用了 Esty 提供的 .sty-text-large 类来设置一个大型的字体，它还使用了 .stylize 类来使得中文内容具有良好的排版效果。
现在我们来定义这些类。在 esty.min.css 中，你可以找到以下这些样式：
-- -------------------- ---- -------
--------------- -
---------- -------
------------ ----
-
-------- -
------------ ----- ------ -----------
-------- -----
----------- ----------
-这里定义了一个 .sty-text-large 类，它设置了一个 2.5rem 的字体大小，并将行高（line-height）设为 1.2。下一个 .stylize 类，定义了一个不同的字体，它使用了 hyphens 属性（用于指定浏览器应如何对单词中的连字符进行排版），并且将 word-break 属性设置为 break-all，使得所有的单词都能够在必要时被断行。这两个类都是可以定制的，你可以根据自身的需要将这些属性进行修改。
结论
通过这个简单的例子，我们可以看出 Esty 就是一个帮助你在 Web 中实现中文排版的利器。它可以帮助你快速、方便地实现中文排版、排版调整、字体选择等功能。Esty 适用于开发者和设计师，使用简单，易扩展。
通过学习使用 Esty，我们能够更加方便、快速地实现中文排版。如果你正在进行网页开发工作，或者你是一名设计师，那么不要错过这个好工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3781e8991b448daf89