使用font-spider进行字体压缩

最新推荐文章于 2024-05-16 09:57:40 发布

卿思语

最新推荐文章于 2024-05-16 09:57:40 发布

阅读量741

点赞数

本文链接：https://blog.csdn.net/demowyz/article/details/128207641

版权

字体太大的原因是中文汉字太多了，但是其中很大一部分生僻字我们是极少用到的，所以font-spider对字体进行压缩的原理，也只是将这部分极少用到的生僻字给剔除掉。

具体操作流程如下：

1、新建一个普通项目，创建如下目录结构：

2、index.css内容如下（虽然这里写了很多，但是你的fonts下只需要有Yahei.ttf就可以）：

@charset 'utf-8';
@font-face {
  font-family: Yahei;
  src:  url("../fonts/Yahei.eot");
  src:  url("../fonts/Yahei.eot?#font-spider") format("embedded-opentype"),
        url("../fonts/Yahei.woff2") format("woff2"),
        url("../fonts/Yahei.woff") format("woff"),
        url("../fonts/Yahei.ttf") format("truetype"),
        url("../fonts/Yahei.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.ping {
      font-family: "Yahei";//方便全局使用
      color:#ffaaff;
}

3、index.html内容如下（注意，index.html是在根目录下，并不在src下）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<link rel="stylesheet" href="./src/css/index.css">
	</head>
	<body>
		<div class="ping"></div>
	</body>
</html>

4、安装 font-spider