效果图：
直接使用方式
直接用js调用（注意跟下面的完整使用方式的区别在于直接使用相当于是直接克隆了figlet的所有内容，所以不存在各种资源问题，因为是直接使用，所以也不存在html中使用的路径问题，不过html中也可以通过webpack等打包工具来使用，但是那样项目就太大了，也不符合我只是试一试这个库的初衷）
安装figlet库
npm install figlet直接用js调用figlet函数
var figlet = require("figlet");
figlet("Hello World!!", function (err, data) {
if (err) {
console.log("Something went wrong...");
console.dir(err);
return;
}
console.log(data);
});运行即可：
完整使用方式
完整使用就得在本地引入字体，因为不引入拉取下来的figlet.js里引用字体的方式是相对路径，这样的话引到本地就会取不到字体资源，出现网络错误。
如下设置项目结构：
字体文件可以在这里下载：figlet - npm (npmjs.com)
test.html就如下设计即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/figlet/lib/figlet.js"></script>
</head>
<body>
<pre id="output"></pre>
<script>
// 不使用import语句，直接使用全局变量figlet
figlet.text('Hello, World!', {
font: 'Standard',
horizontalLayout: 'default',
verticalLayout: 'default'
}, function(err, data) {
if (err) {
console.log('Something went wrong...');
console.dir(err);
return;
}
document.getElementById('output').innerText = data;
});
</script>
</body>
</html>
参与讨论
(Participate in the discussion)
参与讨论