记一个小工具——font-spider(字蛛-css压缩中文字体字体）

最新推荐文章于 2024-08-09 08:35:53 发布

喋喋泵

最新推荐文章于 2024-08-09 08:35:53 发布

阅读量4.8k

点赞数 2

分类专栏：前端开发相关知识点文章标签： html node.js css

本文链接：https://blog.csdn.net/qq_40420294/article/details/109594063

版权

前端开发相关知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

font-spider

链接
用处
安装和用法

链接

先上一个官方链接吧 字蛛
再来一个Git地址字蛛Git地址

用处

这是一个压缩中文字体的小工具，用于前端开发过程中页面需要特定的文字，这些文字要是长期没有变化可以切图😂。
今天介绍的小工具就是用于有变化的文字，首先通过font-face的方法引入特定字体，通常一个字体文件过大(≥1M)，页面上使用的又不是很多，因项目需求使用自定义字体，发现页面加载很慢，所以使用font-spider压缩字体大小，提升页面加载速度。
该工具的原理就是浏览整个页面文字，仅保留文件内引用的部分字体，实现了按需进行压缩字体的功能
引用一段官方解释，这个工具做了两部分工作：

压缩字体：智能删除没有被使用的字形数据，大幅度减少字体体积
生成字体：支持 woff2、woff、eot、svg 字体格式生成
下面讲讲它的安装和用法，以一个例子为准：

安装和用法

首先保证node环境，node的安装在此不再赘述，执行以下代码安装：

npm install font-spider -g

接下来需要一个web字体文件，该文件可以是任何形式的，例如我这里是.ttf类型字体文件，将它在css中引入：

/*声明 WebFont*/
@font-face {
  font-family: '方黑';
  src: url('../font/source.ttf');
  src:
    url('../font/source.ttf') format('truetype')
    // 此部分根据你的字体源文件定义，注意路径
    /*url('../font/source.eot?#font-spider') format('embedded-opentype'),
    url('../font/source.woff2') format('woff2'),
    url('../font/source.woff') format('woff'),
    url('../font/source.svg') format('svg');*/
  font-weight: normal;
  font-style: normal;
}

引入字体后，使用该字体，你可以用任何选择器去使用这个font-family：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
//这里引入了引入字体的css，所以我们可以使用这个字体
<link rel="stylesheet" type="text/css" href="./font/style/index.css">
</head>
<body>

<h1 style="font-family: '方黑';">1234567890</h1>
<div class="text" style="font-family: '方黑';">
  <p>我是一个例子</p>
</div>
</body>
</html>

接下来使用命令去扫描用了字体的文档，然后达到压缩的功能：

font-spider *.html // 这里使用通配符匹配任意的html文件，也可自行选择文件
**命令：** font-spider [options] <htmlFile1 htmlFile2 ...> //支持一个或多个页面地址，支持 http 形式。

命令执行完会在原字体处生成一个新的字体文件，而旧的文件会保存在font-spider文件夹下，新生成的就是压缩后的字体文件。
至此，工具的使用方法介绍完了。
补充一点在Vue项目中使用它的话，并不像传统的前端生成静态的HTML。所以不适用于现在的字蛛使用方式，笔者在此采用的是新建一个与项目无关的静态html文件，将所需的字放入页面中，再通过上述方法进行压缩生成的文件再引入项目后使用。
好啦，分享结束，感谢阅读~