字体压缩

 

 

　　背景

　　 在一个项目中，一定要用到某种字体，但是这个字体下下来有10.55MB，这显然是不行的。

　　字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，这样就可以使得字体文件更小。

　　一 ：字蛛是一个中文字体压缩器

　　　　字蛛传送门

　　先安装好 NodeJS，然后执行

npm install font-spider -g

　　新建文件夹：

　　

 

 　　index.css内容

    /*声明 WebFont*/
    @font-face {
        font-family: 'test';
        src: url('./KaiGenGothicSC-Normal.ttf');
        font-weight: normal;
        font-style: normal;
    }

    /*使用选择器指定字体*/
    .test {
        font-family: 'test';
    }

　　index.html内容　　

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>


<body>

    <div class="test">
        日期 摄像头
    </div>
</body>

</html>

　执行命令：

font-spider index.html

　　

限制

  • 不支持 javascript 动态插入的元素与样式
  • .otf 字体需要转换成 .ttf 格式才能被压缩（免费 ttf 字体资源）
  • 仅支持 utf-8 编码的 HTML 与 CSS 文件
  • CSS content 仅支持 content: 'prefix' 和 content: attr(value) 这两种形式

　　　

posted @ 2020-11-25 14:35  echo丶若梦  阅读(1121)  评论(0)  编辑  收藏  举报