网页特殊字体过大的优化

作者：龙 时间：2018-07-20 浏览：

解决办法：

一、字蛛

原理

1. 爬行本地 html 文档，分析所有 css 语句

2. 记录@font-face语句声明的字体，并且记录使用该字体的 css 选择器

3. 通过 css 选择器的规则查找当前 html 文档的节点，记录节点上的文本

4. 找到字体文件并删除没被使用的字符

5. 编码成跨平台使用的字体格式

font-spider 仅适用于固定文本，如果文字内容为动态可变的，新增的文字将无法显示为特殊字体。

使用步骤：

1.安装node.js;

2.安装字蛛：

npm install font-spider -g 

3.运行字蛛

font-spider C:UserswangchaoDesktopindex*.html 
<!--也就是你的html完整路径 【*】 是通配符，表示会扫描所有的html文件 -->
<!--要是打包单个html中使用的特殊字体文字，将文件名改成对应的文件名-->

4.运行完后

<!--发现字体文件的根目录多了一个font文件夹，文件夹里存放的是原来字
体文件的备份，而网页引用的是使用字蛛后压缩保存的字体-->

二、在线提取字体

字体生成器

    <!--css-->
    .font {
        font-size: 32px;
        color: skyblue;
        font-family: 'sx';
    }
    
    @font-face {
        font-family: 'sx';
        src: url('suxin-subfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    <!--html-->
     <p class="font">京德匠心铸器</p>

也可以看出来字体文件生效了，但是同样，也不支持动态的添加的文字