在網頁中使用中文字體(字蛛)與中文字體分享

字蛛是一個 WebFont 智能壓縮工具,它能自動化分析頁面中所使用的 WebFont 并進行按需壓縮,通常好幾 MB 的中文字體可以被壓縮成幾 KB 大小。


福利在最后。

字蛛主頁:http://font-spider.org

特色:

  • 支持絕大多數的中英文 Truetype 字體
  • 支持開源圖標字體庫
  • 支持 CSS 偽元素解析,支持 content: "string" 與 content: attr(value) 表達式
  • 支持遠程頁面解析,并支持資源映射
  • 支持四種樣式規則: <style>、<link>、@import 、style=""
  • 支持四種調用方式:命令行、Gulp、Grunt、JS Api
  • 性能、穩定性大幅提高
支持圖標字體壓縮

輸入 font-spider 命令,啟動字蛛進行字體壓縮:


自動壓縮當前目錄的網頁字體

壓縮中文字體

一般方法是你可以直接安裝 Node.js,然后使用 npm 安裝字蛛,但是這個過程還需要安裝一些編譯工具,對于不熟悉命令行或者使用 Windows 的用戶來說,這大概不是一個好方法。所以下面提供兩種方法使用字蛛,一種是直接安裝,另一種是使用已經打包好的字蛛鏡像(Docker),通過 docker pull 鏡像到本地直接使用。

方法一:直接安裝

安裝 NodeJS,然后安裝字蛛:

npm install font-spider -g

在 CSS 中聲明 WebFont:
切換到你寫的 css 頁面聲明字體,方法與 CSS3 的 @font-face 方法類似。

/*聲明 WebFont*/
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用選擇器指定字體*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}

注意:

  1. @font-face 中的 src 定義的 .ttf 文件必須存在,其余的格式將由工具自動生成。
  2. 開發階段請使用相對路徑的 CSS 與 WebFont

使用字蛛(路徑不要有中文):

font-spider ./demo/*.html
壓縮中文字體

方法二:使用 Docker 鏡像

拉取鏡像:

docker pull zuolan/font-spider

直接使用:

docker run -v /YOUR_HTML_FILES/:/work zuolan/font-spider font-spider /YOUR_HTML_FILES/*

Dockerfile 如下,不知道哪些可以在編譯后刪除所以暫時鏡像還是挺大的,有空梳理一下依賴,去掉無關要緊的軟件包。

FROM mhart/alpine-node
USER root
RUN apk add --no-cache python g++ make
RUN npm install -g font-spider
WORKDIR /work
# font-spider /html/*

字體分享

百度云:https://pan.baidu.com/s/1kVSFO3P

字體全部為非商用。

我能吞下玻璃而不傷身體
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容