解決辦法:
一、字蛛
原理
爬行本地 html 文檔,分析所有 css 語句
記錄@font-face語句聲明的字體,并且記錄使用該字體的 css 選擇器
通過 css 選擇器的規則查找當前" />
解決辦法:
原理
爬行本地 html 文檔,分析所有 css 語句
記錄@font-face語句聲明的字體,并且記錄使用該字體的 css 選擇器
通過 css 選擇器的規則查找當前 html 文檔的節點,記錄節點上的文本
找到字體文件并刪除沒被使用的字符
編碼成跨平臺使用的字體格式
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>
也可以看出來字體文件生效了,但是同樣,也不支持動態的添加的文字
最新動態
常見問題百寶箱
A2014,有位學妹不顧家人反對,在上海這個國際化大都市謀了一個公眾號助理的職位。斗志昂揚地奮斗了 3 年,我眼看著她的內容駕馭能力突飛猛進,內容質量從三流到一流,職位
A文章主要分析了不同的視覺設計元素是如何影響網站用戶體驗,希望通過文章的解讀能夠對你的產品設計帶來些啟發。 也許是因為我在視覺設計上沒有太多經驗,我發現
A雙贏系統建站系統,三網同步,建站推廣一步到位雙贏系統建站系統,三網同步,建站推廣一步到位雙贏系統建站系統,三網同步,建站推廣一步到位雙贏系統建站系統,三網同步,建站推
Copyright 2013-2020 All Rights Reserved 武漢互贏網絡科技股份有限公司 鄂ICP備19027860號