ttf 壓縮】html網頁引用中文字體,文件過大,加載緩慢的解決辦法【字蛛】【web font】(轉)


【以下有部分內容引用的網絡文章】 
我們在日常需求中,經常會碰到視覺設計師對某個中文字體效果非常堅持的情況,因為頁面是否高大上,字體選擇是很重要的一個因素,選擇合適的字體可以讓頁面更優雅。面對這種問題,我們通常以下方式來進行設計還原:

使用圖片背景還原設計,即使用 photoshop 將文本圖層單獨導出成網頁背景圖片。

產生的問題

  1. 制作與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合並雪碧圖更繁瑣,后期修改更加繁瑣。

  2. 用戶體驗差。導致網頁不支持選中、復制、搜索、翻譯、矢量縮放,也會影響視障用戶使用讀屏器操作網頁。

  3. 帶來更多帶寬消耗。導出的圖片體積隨着文本面積增加,且字形無法重復利用,這消耗着大量的服務器資源

WebFont技術提供了在網頁使用特殊字體的可能,從而避免用圖片的方法。它的實現方法是通過CSS的@font-face引入字體。很多互聯網公司已經率先采用了這種方法,比如Apple官網就是采用了自己的字體。Google也推出了免費的WebFont雲托管服務,在國外網站自定義字體得到很好的應用。

在中文方面自定義字體卻遲遲沒有廣泛應用,這是有什么原因呢?

中文WebFont的困境

中文字體體積大

英文字體文字部分由26個字母組成,所以字體文件通常不會太大;而中文漢字數量總共約有九萬左右, 國標(GB)字庫 有6763字, 而根據《現代漢語常用字表》統計數據,常用漢字也要有3500個左右。 中文字體文件通常都會幾M的大小,參照現在中國的網絡環境,顯然不適合在項目中使用。

瀏覽器支持

不同瀏覽器對字體的支持也是不同的,沒有一種可以支持所有瀏覽器的字體,這就要求我們針對不同的瀏覽器制作不同的字體。(N=Not supported, P=Partial support, Y=Supported)

table

針對以上的問題,我們可以得出中文WebFont要解決的問題是:壓縮和轉碼。

Font-Spider中文WebFont解決方案的誕生:

為了不讓工程與體驗制約着設計師對字體選擇以及創意的實現,我們利用業余時間解決了中文WebFont的兩大問題即壓縮和轉碼,於是便有了 Font-Spider (字蛛)的誕生。作為業界首款中文 WebFont 本地自動化壓縮與轉碼工具,中文字體 web 化問題迎刃而解。它是一個 web 字體工具,通過自動化技術來壓縮、轉碼跨平台的中文字體,讓網頁自由嵌入中文字體成為可能。

原理

  1. 爬行本地 html 文檔,分析所有 css 語句

  2. 記錄@font-face語句聲明的字體,並且記錄使用該字體的 css 選擇器

  3. 通過 css 選擇器的規則查找當前 html 文檔的節點,記錄節點上的文本

  4. 找到字體文件並刪除沒被使用的字符

  5. 編碼成跨平台使用的字體格式

編碼零干預

不需要改變 web 工程師現有的編碼習慣、工程師可直接通過 css @font-face與選擇器定義並應用字體。

壓縮與轉碼

剔除沒有使用的字符,通常可將數 MB 的字體壓縮成數十 KB 大小,解決中文字體過大的問題,並編碼成跨平台兼容的格式。

web 中文字體演示與工具使用請前往主頁:http://font-spider.org/

【以上有部分內容引用的網絡文章】


接下來說重點,其實上面的可以不看,哈哈。。。 
最近在給公司的網站做改版,放到服務器上之后發現加載特別慢,查找原因,是ttf字體庫導致的,一看10M,太大了,頁面加載半天才能出來,於是在晚上需求解決方案,終於發現了一好辦法【字蛛】,感覺不錯,文件可以瞬間小很多,其實原理我覺得很簡單,英文就26個字母,中國漢字那么多,字體文件肯定會很大,【字蛛】只不過是把你頁面上要用的漢字都給提取出來重新生成一個新的字體文件,顯然會很小,廢話不多說,接下來上步驟: 
1、【安裝nodeJs】 
這步我就不多說了,不是本文的重點,大家可以找度娘,一堆 
這里要注意的事需要用到npm安裝, 尼瑪中國的網絡你懂的,牆很高,怎么辦,有辦法 
用淘寶鏡像,命令如下:

首先打開nodejs客戶端
輸入一下命令:
npm config set registry http://registry.npm.taobao.org 
npm info underscore (如果上面配置正確這個命令會有字符串response)

命令行指定 
npm –registry http://registry.cnpmjs.org info underscore

這樣一來速度會快很多了

2、【安裝字蛛】 
輸入命令 
npm install font-spider -g 
會看到一堆警告,沒關系,到最后會出現如下顯示 
這里寫圖片描述

說明成功了

3、【運行】 
安裝成功之后就開始壓縮了

我的目錄是這樣的 
這里寫圖片描述

我的css文件是開頭是這樣的

這里寫圖片描述

這里要確保ttf文件一定要有,其他的不管

在你的html中也引用了相應的css文件

接下來就是最后一步了 生成新的字體庫

nodejs 命令行輸入 
font-spider C:\Users\wangchao\Desktop\index*.html 
也就是你的html完整路徑 【*】 是通配符,表示會掃描所有的html文件 
然后回車 

轉:http://blog.csdn.net/yueyemoyan/article/details/52004203


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM