當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【font-spider】网页中引用字体文件过大的解决办法，网页字体文件压缩

發布時間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了【font-spider】网页中引用字体文件过大的解决办法，网页字体文件压缩小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

font-spider（字蛛）官網:
字蛛
github源碼

安裝

先要安裝npm與node
安裝好之后就可以直接安裝字蛛
我用了centos的服務器用npm全局安裝font-spider

# npm install font-spider -g

安裝之后輸入

# font-spider

看到下面的就說明安裝成功了

使用方式

首先要有項目中的html文件在其外聯的css樣式中要規定字體文件
創建的css文件我這里命名為css.css

在 CSS 中使用 WebFont： @font-face{font-family:'漢儀樂喵體簡';src:url(../HYLEMIAOTIJ.TTF); } body{font-family:"漢儀樂喵體簡"; }

文件并不是全部都需要只要其中有一個就行。在生成新的字體文件的時候所有對應的格式都會生成
在html中外聯這個css文件
font.html:

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>main</title><link rel="stylesheet" href="css/css.css"> </head> <body><div>這是測試的字1234567890!@#$%^</div> </body> </html>

在使用fonts-spider之前先cd到目標文件目錄就是你需要生成的新的字體文件的html目錄
或者寫全目錄
使用font-spider生成：

# font-spider *.html

*是通配符代表所有的html文件
輸入之后回車開始生成：

我這里由于測試的html中字少所以字體文件只有8kb左右實際情況下如果html中字的種類越多生成的字體文件越大但是絕對比原來的字體文件小很多
生成完畢的字體文件會代替原來的字體文件，而原來完整的字體文件會進入到當前目錄下的一個叫.font-spider的隱藏文件中

開心。-。以后再也不怕設計稿用個大段的特殊字體了。當然最好的解決辦法就是盡量別在網頁上用特殊字體！

歡迎評論點贊哦

總結

以上是生活随笔為你收集整理的【font-spider】网页中引用字体文件过大的解决办法，网页字体文件压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： OpenGL（可编程管线）：Bezier
下一篇： git操作---分支的创建和合并