font-spider 压缩字体文件 html vue

TWL1203

已于 2023-08-01 11:14:42 修改

阅读量1.3k

点赞数

文章标签： html vue.js 前端

于 2022-09-21 13:32:21 首次发布

本文链接：https://blog.csdn.net/TWL1203/article/details/126969864

版权

font文件一般都很大，占用内存，向大家推荐一个压缩插件font-spider，这个插件是基于node环境的,主要是通过一个引入字体的html文件来生成一个新的压缩后的字体，建议创建一个html文件来压缩，如果要在vue项目里，可以借助项目中的index.html文件。
源文件7M，压缩完36K。步骤如下：

1. 安装nodejs
这个步骤就不详细赘述了，可以用node -v来检测是否安装环境。

2. 安装font-spider

npm install font-spider -g

3. 创建html文件，引入font
我创建的目录如下：
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
	<link rel="stylesheet" href="./index.css">
</head>
<body>
	<p>
		我是一段普通的文字，我是一段普通的文字，我是一段普通的文字，我是一段普通的文字，我是一段普通的文字。
	</p>
	<p class="main2">
		我是一段带有字体的文字，我是一段带有字体的文字，我是一段带有字体的文字，我是一段带有字体的文字。
	</p>
</body>
</html>

index.css

@font-face {
  font-family: 'HarmonyOS_Sans_SC_Medium';
  src:
    url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.ttf') format('truetype')
    /*url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.eot?#font-spider') format('embedded-opentype'),
    url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
    url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff'),
    url('./fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Mediume.svg') format('svg');*/
}

p {
	margin: 20px;
}

p:nth-child(2) {
	font-family: 'HarmonyOS_Sans_SC_Medium';
}