字体压缩

  背景

   在一个项目中,一定要用到某种字体,但是这个字体下下来有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) 这两种形式

   

原文地址:https://www.cnblogs.com/gaoht/p/14035968.html