font-spider 让网页引入中文字体成为可能

最新推荐文章于 2024-05-03 15:15:35 发布

小鑫a

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量167

点赞数

分类专栏：工具文章标签： nodejs css npm 前端

本文链接：https://blog.csdn.net/qq_38605121/article/details/105623791

版权

3 篇文章 0 订阅

订阅专栏

随着互联网的飞速发展，人们已经不满足于在web页面上使用一些默认字体了，但是页面引入字体文件体积很大加载又费时，那是怎么办呢？今天介绍的这个工具就可以完美的解决这个问题

字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

具体意思就是说你可以在页面直接引入字体，它能自动检测css里 @font-face 自定义的字体，并且从字体里提取出页面中有用到的字体，极大的减少了字体文件的空间。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJubogkY-1587305922442)(https://note.youdao.com/yws/res/1732/094C66F1EDCA4C67A0C8291EE8D637C4)]

安装好 nodeJs 后，安装 font-spider，执行命令：

npm install font-spider -g

命令执行完后可以执行

font-spider -V

查看是否安装成功，安装成功的话会输出版本号

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t2N8KnMn-1587305922450)(https://note.youdao.com/yws/res/1757/CFE5FD5E0FB64436AC5D41A20868E00E)]

在 css 里定义 @font-face 引入字体文件，并在需要使用字体的地方定义 font-family 。

@font-face {
  font-family: '字体名字';
  src: url('字体路径');
}

p {
  font-family: '字体名字';
}

现在是整个过程中最重要的一步了 - 把使用到的字体从字体文件中提取出来，在html文件所在的位置打开命令行，执行~~古娜拉黑暗神~~命令：

font-spider *.html

* 号代表匹配当前文件夹下的所有 .html 后缀的文件

命令执行成功之后，压缩过后的字体文件会覆盖原来的字体文件，并且会生成一个 .font-spider 文件夹，这个文件夹存放的是压缩之前的字体文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DOEsvv0T-1587305922456)(https://note.youdao.com/yws/res/1805/8DB1CBFFE2854CC1B006B0C5BA33F72A)]

字蛛只是对原来的字体文件进行了一些提取的操作，不会影响字体本身的样式，可以放心使用

（更多复杂的操作可以参考git的文档，这里只是对字蛛提供一个简单的使用demo，妈妈再也不用担心我的页面没有酷炫的汉字了~）

关注