中文字体压缩器并且转换(推荐阅读)

转载于 2021-07-19 11:10:07 发布 · 506 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/zhangtao1990/p/8882870.html

本文介绍了字蛛这款中文字体压缩工具，用于解决网页中引入的CSS字体过大问题。通过npm全局安装font-spider，然后在HTML页面引用字体，执行font-spider命令，可以将原本5.6M的字体文件压缩到十几K，显著减小页面加载负担。

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

官方网站：http://font-spider.org/index.html

用于解决页面引入的css字体过大的问题

使用方法：

　　npm i -g font-spider

　　在页面引入外部字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        @font-face {
            /* font-family: customize;
            src:url(./庞门正道标题体.ttf); */
            font-family: customize;
            src: url('./庞门正道标题体.eot');
            src:
                url('./庞门正道标题体.eot?#font-spider') format('embedded-opentype'),
                url('./庞门正道标题体.woff') format('woff'),
                url('./庞门正道标题体.ttf') format('truetype'),
                url('./庞门正道标题体.svg') format('svg');
            font-weight: normal;
            font-style: normal;

        }
        div {
            font-family: customize;
        }
    </style>
</head>
<body>
    科技官方<br>
    <div>
        fksdgfskdf
        广东省价格反映阿古斯雅思官方呀<br>
        sdgfafguy 复古一个富有高素养的
    </div>
</body>
</html>

　　　　这个是为压缩之前的字体，有5.6M

执行命名

　　font-spider index.html

　　这个是执行后的字体，有十几K （之前的字体备份在.font-spider文件夹）