当前位置：网站首页>字体压缩神器font-spider的使用

字体压缩神器font-spider的使用

2022-07-31 02:33:00 【浩星】

前言：

很多时候项目会遇到需要引入外部字体，不管是vue,小程序，react等等，但是pc端项目还好，把源文件放我们本地是可以的，小程序就不行了，因为体量比较小，对大小有限制。

font-spider 字蛛官网地址：最好有翻墙软件，不然太慢了，大概率不成功

font-spider.org - http://ww1.font-spider.org/

具体使用：

1、全局安装插件

npm install font-spider -g

2、检查有没有安装成功

font-spider -V

3、打开你的目录，找到你的源文件在的文件夹，比如我的

4、新建一个index.html，

注意LouisVuittonGlobal-Regular 等名字换成你自己的源文件

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>font spider</title>
    <style>
        @font-face {
            font-family: 'LouisVuittonGlobal-Regular';
            src: url('./LouisVuittonGlobal-Regular.eot');
            src:
                url('./LouisVuittonGlobal-Regular.eot?#font-spider') format('embedded-opentype'),
                url('./LouisVuittonGlobal-Regular.woff') format('woff'),
                url('./LouisVuittonGlobal-Regular.ttf') format('truetype'),
                url('./LouisVuittonGlobal-Regular.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        .medium {
            font-family:'LouisVuittonGlobal-Regular';
        }
        @font-face {
            font-family: 'LV_Global_Demi';
            src: url('./LV_Global_Demi.eot');
            src:
                url('./LV_Global_Demi.eot?#font-spider') format('embedded-opentype'),
                url('./LV_Global_Demi.woff') format('woff'),
                url('./LV_Global_Demi.ttf') format('truetype'),
                url('./LV_Global_Demi.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        .bold {
            font-family:'LV_Global_Demi';
        }
    </style>
</head>

<body>
    <div>
        <!-- 这里对应的是Bold的压缩包 -->
        <div class="bold">
            abcdefghijklmnopqrstuvwxyz
        </div>
        <!-- 这里对应的是Medium的压缩包 -->
        <div class="medium">
            ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </div>
        <!-- 这写在class元素之外的就没有对应的压缩包了 -->
        0123456789
    </div>
</body>

</html>

5、右键打开cmd弹框，或者powershell弹框，执行命令

font-spider index.html

6、可以看到下面的界面，源文件2M，压缩以后是60k左右，还有其他格式可以用

7、美滋滋把，用起来，css引入：

@font-face {
    font-family: 'LouisVuittonGlobal-Regular';
    src: url("../fonts/LouisVuittonGlobal-Regular.ttf") format('truetype');  //主要是这句话
    font-weight: normal;
    font-style: normal;
}

原网站

版权声明
本文为[浩星]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_41619796/article/details/126021771