網頁特殊字體過大(dà)的(de)優化(huà)

作者：龍 時(shí)間：2018-07-20 浏覽：

解決辦法：

一、字蛛

原理(lǐ)

1. 爬行本地 html 文檔，分(fēn)析所有 css 語句

2. 記錄@font-face語句聲明(míng)的(de)字體，并且記錄使用(yòng)該字體的(de) css 選擇器

3. 通(tōng)過 css 選擇器的(de)規則查找當前 html 文檔的(de)節點，記錄節點上的(de)文本

4. 找到字體文件并删除沒被使用(yòng)的(de)字符

5. 編碼成跨平台使用(yòng)的(de)字體格式

font-spider 僅适用(yòng)于固定文本，如果文字内容爲動态可(kě)變的(de)，新增的(de)文字将無法顯示爲特殊字體。

使用(yòng)步驟：

1.安裝node.js;

2.安裝字蛛：

npm install font-spider -g 

3.運行字蛛

font-spider C:UserswangchaoDesktopindex*.html 
<!--也(yě)就是你的(de)html完整路徑 【*】 是通(tōng)配符，表示會掃描所有的(de)html文件 -->
<!--要是打包單個(gè)html中使用(yòng)的(de)特殊字體文字，将文件名改成對(duì)應的(de)文件名-->

4.運行完後

<!--發現字體文件的(de)根目錄多(duō)了(le)一個(gè)font文件夾，文件夾裏存放的(de)是原來(lái)字
體文件的(de)備份，而網頁引用(yòng)的(de)是使用(yòng)字蛛後壓縮保存的(de)字體-->

二、在線提取字體

字體生成器

    <!--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">京德匠(jiàng)心鑄器</p>

也(yě)可(kě)以看出來(lái)字體文件生效了(le)，但是同樣，也(yě)不支持動态的(de)添加的(de)文字