前端開發的同學，我們經常會碰到需要還原設計稿中的特殊字體。這時，我們可能會采用兩種方案：

1、使用photoshop將文本圖層單獨導出成圖片;

2、直接引入改字體的字體庫.ttf文件

首先第一種方案的缺點，使用圖片代替文字，制作和維護的成本很高,前期切圖，合并雪碧圖比較繁瑣，后期修改和維護更是麻煩。同時使用圖片，會帶來更多的寬帶消耗；用戶體驗方面，用戶無法進行文字的選擇，復制等操作，體驗也不好。

第二種方案，解決了上述的一些問題，但是由于漢字數量太大，導致中文字體文件也較大，通常都會有幾M大小，不適合在項目中使用。尤其是移動端項目，由于字體加載速度很慢，體驗會十分不好。

那么如何解決移動端引入的字體文件過大問題？下面本篇文章將介紹兩種自動化工具，來實現在移動端愉快的使用特殊字體，分別是Font-Spider(字蛛)和fontmin。

瀏覽器對字體的支持

不同瀏覽器對字體的支持不同，所以我們要對不同的瀏覽器制作不同的字體。下圖是瀏覽器對字體的支持情況，其中N為不支持，P為部分支持，Y為支持。

Font-Spider(字蛛)

字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。Font-Spider的使用方法很簡單,官網介紹的也很詳細,下面簡單介紹,也可直接去官網查看.

1、首先,全局安裝font-slidernpm install font-spider -g

2、在css中使用/*聲明 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';

}

提示: @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動生成

3、運行font-slider命令font-spider ./demo/*.html

頁面依賴的字體將會自動壓縮好，原來幾M的字體文件現在只剩下幾k了, 是不是很爽呢.

4、使用gulp,grunt插件

除了直接進行編譯,font-slider還提供了gulp和grunt的插件,可以更方便的在項目中使用,具體使用可直接到github查看

字蛛 grunt 插件: https://github.com/aui/grunt-font-spider

字蛛 gulp 插件:https://github.com/aui/gulp-font-spider

5、使用的局限

font-slider雖然好用,但是由于其原理是直接分析本地 CSS 與 HTML 文件獲取沒有WebFont中沒有使用過的字符,這樣一來,對于動態生成的文字,就沒有辦法使用font-slider了.這是個壞消息!尤其在當下,很多框架都是數據驅動的,更是很多文字都不會直接出現html文件中.對于這種情況, 下面介紹的fontmin或許能解決.

四、使用Fontmin

Fontmin 是由百度推出的一個字體子集化方案。使用fontmin可以按需提取字體中的部分字型，最小化打包字體，自動生成 WebFont 字體文件(ttf/woff/eot/svg)和 CSS 文件, 并可利用 @font-face 將自定義字體呈現到網頁中，提升網頁文字體驗。Fontmin 提供了 Node.js 模塊和客戶端 2 種使用方法,下面主要介紹Node.js模塊的使用,更多使用請移步到Fontmin快速指南

1、安裝fontminnpm i -g fontmin

2、配置

在項目中創建fontmin.jsvar Fontmin = require('fontmin');

var srcPath = 'font/*.ttf'; // 字體源文件路徑

var destPath = 'font'; // 字體輸出路徑

var text = '我你今天中大獎了快來領紅包';//有哪些文字可能需要用到這個字體的,都可以在這里進行配置

// 初始化

var fontmin = new Fontmin()

.src(srcPath) // 輸入配置

.use(Fontmin.glyph({ // 字型提取插件

text: text // 所需文字

}))

.use(Fontmin.ttf2eot()) // eot 轉換插件

.use(Fontmin.ttf2woff()) // woff 轉換插件

.use(Fontmin.ttf2svg()) // svg 轉換插件

.use(Fontmin.css()) // css 生成插件

.dest(destPath); // 輸出配置

// 執行

fontmin.run(function (err, files, stream) {

if (err) { // 異常捕捉

console.error(err);

}

console.log('done'); // 成功

});

3、輸出

執行fontmin.js文件就可以配置好的目錄下輸出對應的字體及css文件,字體文件也會由原來的即M變成幾k了.node fontmin.js

Fontmin還提供了客戶端, 直接把 TTF 拖進去，左側輸入需要文字，右側實時看效果。點擊生成，一步搞定. 建議還是使用node模塊的方式, 只要在項目中配置好, 以后再有任何文字需要使用字體, 直接添加到fontmin.js中的text中,執行node fontmin.js命令就搞定了.

4、缺點

Fontmin適用于文字不經常變動, 或者在一定范圍內變動的情況, 如果文字經常變，而且沒有固定的范圍，那么也是沒有辦法的。

更多web前端自學知識，請查閱 HTML中文網 ！！

總結

以上是生活随笔為你收集整理的html 中加载字体太慢,css字体文件包太大无法引入怎么处理？的全部內容，希望文章能夠幫你解決所遇到的問題。

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