使用font-spider压缩字体包

最新推荐文章于 2025-04-30 14:15:42 发布

不靠谱的前端

最新推荐文章于 2025-04-30 14:15:42 发布

阅读量863

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_42219561/article/details/111919176

版权

使用font-spider压缩字体包(蜘蛛字体)

在项目中使用的字体文件的时候英文的还好中文字体包动不动就要超过项目大小会严重影响项目加载，对于静态的文字font-spider是一个很好的解决方案。

在全局安装 font-spider。

$ npm install font-spider -g

现在可以使用了
在自己文件下创建一个html文件这个这个可以在任意位置我这里偷懒一下
直接丢在了我的font下边

font.html文件中就像我们其他的一样引入字体包命名

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        @font-face {
            font-family: CN-AlibabaPuHuiTiM;
            src: url("../fonts/AlibabaPratt/AlibabaPratt-Medium.ttf") format("truetype");
        }

        @font-face {
            font-family: EN-Rajdhani-Medium;
            src: url('../fonts/Rajdhani/Rajdhani-Medium.ttf') format('truetype');
        }

        @font-face {
            font-family: CN-AlibabaPuHuiTiR;
            src: url('../fonts/AlibabaPratt/AlibabaPratt-Regular.ttf') format('truetype');
        }
        .CN-AlibabaPuHuiTiM{
            font-family: "CN-AlibabaPuHuiTiM";
        }
        .CN-AlibabaPuHuiTiR{
            font-family: "CN-AlibabaPuHuiTiR";
        }
    </style>
</head>

<body>
    <div class="CN-AlibabaPuHuiTiM">
        我要转换的文字一
    </div>
    <div class="CN-AlibabaPuHuiTiR">
        我要转换的文字二
    </div>
</body>

</html>