npm 包 handwriting.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

手写字体一直是网页设计中的一个非常重要的元素，但是要实现这一点需要掌握大量的 CSS 和 HTML 技术。为了简化这个过程，现在已经有了 handwriting.js 这个 npm 包。这个包可以让你轻松地在网页中添加漂亮的手写字体效果。本文将详细介绍如何使用 handwriting.js 包，并带有一些示例代码。

安装

要使用 handwriting.js，你需要先将它安装到你的项目中。可以使用如下的命令来安装：

npm install handwriting.js --save

使用

安装了 handwriting.js 后，你就可以在你的代码中使用它了。我们将向你展示如何使用三种不同的手写字体效果：Cursive、Dakota 和 Fredericka the Great。

Cursive

要在网页中添加 Cursive 手写字体效果，你需要按照下面的步骤进行：

在你的 HTML 文件中引入 handwriting-cursive.css 和 handwriting.js：

<link rel="stylesheet" href="node_modules/handwriting.js/dist/handwriting-cursive.css">
<script src="node_modules/handwriting.js/dist/handwriting.js"></script>

创建一个 span 元素，并设置一个特殊的类名（字体样式名称）：

<span class="handwriting-cursive">Hello, World!</span>

最后，在你的 JavaScript 文件中使用 handwriting.js：

var els = document.querySelectorAll('.handwriting-cursive');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  var text = el.innerText;
  el.innerHTML = '';
  var writer = new Handwriting(writerOptions);
  writer.draw(el, text);
}

Dakota

要在网页中添加 Dakota 手写字体效果，你需要按照下面的步骤进行：

在你的 HTML 文件中引入 handwriting-dakota.css 和 handwriting.js：

<link rel="stylesheet" href="node_modules/handwriting.js/dist/handwriting-dakota.css">
<script src="node_modules/handwriting.js/dist/handwriting.js"></script>

创建一个 span 元素，并设置一个特殊的类名（字体样式名称）：

<span class="handwriting-dakota">Hello, World!</span>

最后，在你的 JavaScript 文件中使用 handwriting.js：

var els = document.querySelectorAll('.handwriting-dakota');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  var text = el.innerText;
  el.innerHTML = '';
  var writer = new Handwriting(writerOptions);
  writer.draw(el, text);
}

Fredericka the Great

要在网页中添加 Fredericka the Great 手写字体效果，你需要按照下面的步骤进行：

在你的 HTML 文件中引入 handwriting-fredericka.css 和 handwriting.js：

<link rel="stylesheet" href="node_modules/handwriting.js/dist/handwriting-fredericka.css">
<script src="node_modules/handwriting.js/dist/handwriting.js"></script>

创建一个 span 元素，并设置一个特殊的类名（字体样式名称）：

<span class="handwriting-fredericka">Hello, World!</span>

最后，在你的 JavaScript 文件中使用 handwriting.js：

var els = document.querySelectorAll('.handwriting-fredericka');
for (var i = 0; i < els.length; i++) {
  var el = els[i];
  var text = el.innerText;
  el.innerHTML = '';
  var writer = new Handwriting(writerOptions);
  writer.draw(el, text);
}

自定义

你可以通过下面这些方式对手写字体进行自定义：

writerOptions.color — 字体颜色
writerOptions.lineWidth — 字体线宽
writerOptions.lineHeight — 字体行高
writerOptions.size — 字体大小

结论

使用 handwriting.js，现在你不需要凭借自己的 CSS 和 HTML 技巧就能在网页中添加漂亮的手写字体效果了。手写字体是网页设计中一个非常重要的元素，使用 handwriting.js 你可以轻松地实现它们，而不必花费太多时间和精力。

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