npm 包 kerning.js 使用教程

什么是 kerning.js

kerning.js 是一个 JavaScript 库，用于实现字体字符之间的微调（kerning）。它可以帮助我们在排版中更好地控制字符之间的间距，从而提高排版质量。

安装和使用

要使用 kerning.js，我们首先需要使用 npm 安装它。在终端中执行以下命令：

npm install kerning.js

安装完成后，在我们的 HTML 文件中引入 kerning.js：

<script src="node_modules/kerning.js/dist/kerning.min.js"></script>

现在我们可以开始使用 kerning.js 了。例如，我们可以使用以下代码将标题文字应用 kerning：

const title = document.querySelector('h1');
kerning(title);

这将立即对标题应用 kerning 调整，以使字符之间的间距更平滑。

深入理解 kerning.js

kerning.js 的工作原理是通过 JavaScript 计算每个字符与其相邻字符之间的间距，然后微调这些间距以获得最佳效果。它使用字体度量信息来计算这些间距，因此需要确保已加载正确的字体。

kerning.js 还提供了一些选项，以便更精确地控制字符之间的间距。以下是一些常见的选项：

• adjustments：一个对象，用于指定每个字符之间的调整量。例如，{ 'A-w': -10, 'V-A': 5 } 将减少 "A" 和 "w" 之间的距离并增加 "V" 和 "A" 之间的距离。
• tracking：一个数字，指定所有字符之间的默认跟踪值。较高的跟踪值将导致更大的字符间距。
• ignore：一个正则表达式，指定要忽略的字符。这对于排除某些字符（例如连字符）非常有用。

以下是使用选项的示例代码：

const title = document.querySelector('h1');
kerning(title, {
  adjustments: { 'A-w': -10, 'V-A': 5 },
  tracking: 50,
  ignore: /[-–—]/g
});

总结

在本文中，我们介绍了 npm 包 kerning.js 的基础知识，并提供了详细的使用教程和示例代码。借助 kerning.js，我们可以更好地控制字符之间的间距，从而提高排版质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35348