當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

字蛛的用法以及遇到的问题

發(fā)布時(shí)間：2024/3/13 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了字蛛的用法以及遇到的问题小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

字蛛是一個(gè)中文字體壓縮器，可以壓縮字體文件，從而解決加載緩慢的問題。字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式。

字蛛官網(wǎng)網(wǎng)址為:http://font-spider.org/

接下來說一下具體的使用方法：

一、首先安裝font-spider

npm install font-spider -g

二、檢查字蛛是否安裝完成，如果運(yùn)行后出現(xiàn)版本說明安裝成功

font-spider --version 或者 font-spider -V

三、使用字蛛

注意注意注意：

1. @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動(dòng)生成

2. 開發(fā)階段請(qǐng)使用相對(duì)路徑的 CSS 與 WebFont

接下來具體說一下：

1、首先我們?cè)谧烂嫘乱粋€(gè)font文件夾，在font文件夾下面新建一個(gè)html頁面，比如font.html,然后把我們需要壓縮的字體庫xxxx.ttf文件放到與font.html同級(jí)目錄

2、在font.html頁面編譯引入我們的字體庫，具體寫法如下：

<!DOCTYPE html> <html lang="en"> <style>@font-face {font-family: HYRunYuan55W;src: url("./HYRunYuan-55W.ttf") format('truetype');font-weight: normal;font-style: normal;} </style> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div>1 2 3 4 5 6 7 8 9您一共使用分享資源分享是幸福的而最大的幸福分享給學(xué)生那您一定是世界上最幸福的人就是把知識(shí)趕快開啟您的分享之旅吧分享在信息化的道路上您又前進(jìn)了一步我們一直在知識(shí)的奧秘我們共相伴了最美的風(fēng)景不是天涯海角而是近在咫尺有您一路相伴真好 </div> </body> </html> <style>div{font-family: HYRunYuan55W;} </style>

上面div里面的內(nèi)容就是我們需要從字體庫中要篩選的所有字體，然后重新打包一份ttf文件，這份打包后的ttf文件就是只包含我們定義好的這些字體的文件了

3、然后打開cmd，在我們的font文件夾里面執(zhí)行打包命令，注意：字體庫一定要是ttf文件

?font-spider font.html

第一種情況：運(yùn)行后發(fā)現(xiàn)沒報(bào)錯(cuò)，出現(xiàn)下面圖片：說明打包成功了

運(yùn)行成功后你會(huì)發(fā)現(xiàn)，font文件夾會(huì)把你之前的很大的ttf文件備份在新生成的.font-spider文件夾下，在font文件夾下打包壓縮后的字體文件，發(fā)現(xiàn)字體庫文件大小已經(jīng)很小了。就沒問題了，然后使用我們打包后的字體庫就可以了

第二種情況：運(yùn)行時(shí)候報(bào)錯(cuò)?Cannot read property ‘dirname’ of undefined

如果在文件里，使用了兩次@font-face，分別對(duì)兩種外部字體進(jìn)行調(diào)用，而第一個(gè)調(diào)用不存在ttf文件，雖然沒有對(duì)它進(jìn)行處理，但是font-spider會(huì)對(duì)他進(jìn)行識(shí)別，發(fā)現(xiàn)沒有ttf文件，就自動(dòng)報(bào)錯(cuò)。

所以一定注意使用的是ttf字體庫

如果是vue項(xiàng)目我們就可以這么引入了

新建一個(gè)公共的aa.css文件

然后定義好我們的@font-face

@font-face {font-family: HYRunYuan35W;src: url("../fonts/HYRunYuan-35W.ttf") format("opentype");font-weight: normal;font-style: normal; } @font-face {font-family: HYRunYuan55W;src: url("../fonts/HYRunYuan-55W.ttf") format("opentype");font-weight: normal;font-style: normal; }

在main.js引入import ../xxxxx/aa.css

然后在我們需要的地方就可以使用字體庫了

通過? font-family: HYRunYuan35w;就可以正常使用了

總結(jié)

以上是生活随笔為你收集整理的字蛛的用法以及遇到的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。