font-spider字蛛怎么用，踩坑记录

夜雨风亭

已于 2022-04-02 15:05:44 修改

阅读量1.9k

点赞数 1

文章标签：前端大前端 node.js 经验分享 javascript

于 2020-12-16 14:10:13 首次发布

本文链接：https://blog.csdn.net/qq_20095005/article/details/111252870

版权

font-spider字蛛有什么用？

在已知使用字符的情况下，压缩字体包，
把html中使用到的字符进行打包，生成新的字体包，减小体积

font-spider字蛛怎么用

1.Git下载https://github.com/aui/font-spider/tree/master/src
2.src中新建目录，如下图
在这里插入图片描述
3.index.html写入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*声明 WebFont*/
        @font-face {
            font-family: 'DFGBZY9_FTO';
            src: url('DFGBZY9_FTO.eot');
            src:
                    url('DFGBZY9_FTO.eot?#font-spider') format('embedded-opentype'),
                    url('DFGBZY9_FTO.woff') format('woff'),
                    url('DFGBZY9_FTO.ttf') format('truetype'),
                    url('DFGBZY9_FTO.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

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

        /*声明 WebFont*/
        @font-face {
            font-family: 'Impact1';
            src: url('Impact.eot');
            src:
                    url('Impact.eot?#font-spider') format('embedded-opentype'),
                    url('Impact.woff') format('woff'),
                    url('Impact.ttf') format('truetype'),
                    url('Impact.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        /*使用选择器指定字体*/
        .Impact1 {
            font-family: 'Impact1';
        }
    </style>
</head>
<body>
    <div class="DFGBZY9_FTO">
    	这里是DFGBZY9_FTO需要使用的字符，下边那个是Impact使用的字符
    </div>
    <div class="Impact1">./1234567890AqwertyuiopasdfghjklzxcvbnmL</div>
</body>
</html>

4.控制台运行 font-spider src/test/index.html
5.得到字蛛生成的新字体文件
在这里插入图片描述

踩坑记录：

@font-face，src写的目录不只是引用目录，
同时也是生成目录，
会改掉这里原本放的字体文件在这里插入图片描述

下图的文件都是生成的结果
在这里插入图片描述

.font-spider中是自动备份，而不是结果
在这里插入图片描述

夜雨风亭

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
font-spider字蛛怎么用，踩坑记录

font-spider字蛛有什么用？在已知使用字符的情况下，压缩字体包，把html中使用到的字符进行打包，生成新的字体包，减小体积font-spider字蛛怎么用1.Git下载https://github.com/aui/font-spider/tree/master/src2.src中新建目录，如下图3.index.html写入代码<!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫