工作中我相信大家都遇到過設計要求使用一些奇奇怪怪字體的需求，然后因為字體文件太大，選擇切圖。

我這個需求就厲害了，用戶發的文章可以選擇字體。這文章中可以出現的字就太多了，顯然上個方案就不合適了，那我們是這么做的呢？

廢話不多說，先上 demo，別問我 demo 是誰。

實現方案

分析一下問題

問題只有一個，那就是：字體文件太大了(10MB)。先不說流量貴不貴，這么大個文件，垃圾網時，我文章都看完你字體還沒回來。

解決方案

當然是把字體文件縮小，那么有兩種方案

提供常用字生成字體文件

動態生成字體文件

提供常用字生成字體文件

英文的話比較簡單，比如只提供 26 個字母。

但是中國漢字博大精深，太難了，那么我們可以提供一些常用字。

優點：

只有一個資源，可以緩存公用。

實現簡單

缺點：

因為是常用字，所以有可能一些不常用字就會顯示默認字體，體驗較差。

因為字體文件較大，所以首次加載會慢一點。但是又因為不是全量，會快一點。

動態生成字體文件

這個方案就是把文章中的所有字提出來，然后生成一個字體文件使用。

其實這個方案常用于靜態頁面，跑個腳本分析生成一個字體文件。

優點：

文件小，速度快

實現稍微復雜，因為需要動態生成字體文件，需要服務端搞一個字體生成的服務。

缺點：

每次修改文章都要生成新的字體文件，舊資源利用率不高，緩存利用率不高。

當然，我們最后選擇了這個動態生成字體文件方案，就了文件小，加載快。

fontmin庫

好了上面把方案說了，下面就開始說怎么搞了。

我使用的是 fontmin 庫來實現的功能。

安裝

npm install --save fontmin

使用

var Fontmin = require('fontmin');

new Fontmin()

.src('/static/font/font.ttf') // 載入字體

.use(rename(txtMD5+'.ttf')) // 修改輸出的文件名

.use(Fontmin.glyph({text: txt,hinting: false})) //子集化 text 參數就是輸出時要的字體

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

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

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

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

.dest('/static/fontmin'); // 設置字體輸出路徑

.run(function (err, files) {

if (err) throw err;

console.log('success');

});

修改生成的文件名稱

var rename = require('gulp-rename');

.use(rename(txtMD5+'.ttf')) // 修改輸出的文件名

修改 CSS 文件中字體的 Font-family

.use(Fontmin.css(

fontFamily: 'MD5'

))

其他資源

font-spider

可以自動分析Html文件，可以放入 Gulp 中使用。

font-carrier

也可以做字體子集化，還可以修改每個字的字形(可以理解為混淆)。

微信公眾號：前端linong

總結

以上是生活随笔為你收集整理的用html修改游戏聊天字体,前端使用自定义字体方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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