壓縮HTML引用字體

例簡(jiǎn)介

有些網(wǎng)站為了凸顯某部分字體，而引入自定義字體，但由于自定義字體相對(duì)都比較大（幾M），導(dǎo)致頁(yè)面加載緩慢；所以本文介紹三種壓縮字體的方法，可根據(jù)項(xiàng)目情況自行選擇。

壓縮方法

1、利用Fontmin程序（效果如下圖）

1）運(yùn)行Fontmin程序后，1位置輸入需要生成的文字內(nèi)容，2位置拖入ttf文件（源文件7947KB）;

2)點(diǎn)擊“生成”按鈕，生成成功后，彈出生成文件（ttf文件變成11KB），根據(jù)瀏覽器兼容性引入文件。

Tips：當(dāng)需要增加新的文字時(shí)，需要重新生成文件。

2、利用Node.js+Fontmin組件（效果如下圖）

1）配置好Node.js框架（本文使用Express）；

2）在index.js文件增加代碼，用來(lái)自動(dòng)讀取“views”下面的所有*.ejs文件的文字，然后根據(jù)“src”的ttf源文件，使用Fontmin組件生成壓縮文件（生成目錄“dest”）。

Tips：適用于多文件情況下，自動(dòng)匯總生成。

// 遍歷所有文件提取里面的所有文字
const fs = require("fs");
const Fontmin = require('fontmin');
let set = new Set();


//get all possible characters
const scanFolder = (dir, done) => {
    let results = [];
    fs.readdir(dir, (err, list) => {
        if (err) {
            return done(err);
        }
        let i = 0;
        (function iter() {
            let file = list[i++];
            if (!file) {
                return done(null, results);
            }
            file = dir + '/' + file;
            console.log(file)
            fs.stat(file, (err, stat) => {
                if (stat && stat.isDirectory()) {
                    scanFolder(file, (err, res) => {
                        results = results.concat(res);
                        iter();
                    });
                } else {
                    results.push(file);
                    iter();
                }
            });
        })();
    });
};
//get all possible characters
const generateFinalHTML = finalString => {
    const fontmin = new Fontmin()
        .src('public/fonts/SourceHanSansCN-Medium.ttf')
        .dest('public/fonts/build/')
        .use(Fontmin.glyph({
            text: finalString,
            hinting: false
        }))
        .use(Fontmin.ttf2woff({
            deflate: true
        }));




    fontmin.run((err) => {
        if (err) {
            throw err;
        }
    });
}
//get all possible characters
scanFolder("views", (n, results) => {
    results.forEach(file => {
        const result = fs.readFileSync(file, 'utf8');
        const currentSet = new Set(result)
        set = new Set([...set, ...currentSet]);
    });
    generateFinalHTML(Array.from(set).join(""))
})

3、利用font-spider組件（效果如下圖）

1）安裝font-spider組件；

npm install font-spider -g

2）新建index.html文件；

3）執(zhí)行下面命令生成壓縮文件。

font-spider ./*.html

總結(jié)

可以根據(jù)項(xiàng)目實(shí)際情況，選擇適當(dāng)?shù)姆椒ā?/p>

、網(wǎng)上下載'ttf'字體

二、在項(xiàng)目中使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: 'homeFont';
        src: url('./siyuan.ttf');
        font-weight: normal;
        font-style: normal;
      }
      p {
        font-family: 'homeFont';
      }
    </style>
  </head>
  <body>
    <p>好</p>
  </body>
</html>

三、下載壓縮字體依賴

npm install font-spider -g

# 查看版本號(hào)
font-spider -V

四、如果是vue中字體需要壓縮，需要自己在外新建一個(gè)文件夾來(lái)存放壓縮字體。

打開(kāi)終端，輸入命令

font-spider index.html

五、復(fù)制.font-splider中字體到vue項(xiàng)目進(jìn)行替換

事背景：
UI設(shè)計(jì)師UI界面設(shè)計(jì)中部分展示內(nèi)容使用了特殊字體，要求實(shí)際頁(yè)面也用同字體展示該內(nèi)容，但目前存在的問(wèn)題是該指定字體體積較大，實(shí)際生產(chǎn)中頁(yè)面加載該字體庫(kù)可能存在加載緩慢問(wèn)題！

如何解決呢？

我們的第一反應(yīng)就是壓縮字體，但實(shí)際測(cè)試中一款完整的字體庫(kù)即使壓縮了效果也不理想！今天老碼給大家推薦的這款工具庫(kù)就是只提取出待使用的字符對(duì)應(yīng)字體工具，簡(jiǎn)單來(lái)說(shuō)頁(yè)面展示內(nèi)容都有哪些字符，就只提取出這些字符字體，從而減少字體體積！沒(méi)錯(cuò)，今天的主角就是 fontmin

https://github.com/ecomfe/fontmin

其官網(wǎng)的使用說(shuō)明也很簡(jiǎn)單，很容易入手！

安裝

npm install --save fontmin

官網(wǎng)也提供了一些有用的插件

glyph — Compress ttf by glyph.
ttf2eot — Convert ttf to eot.
ttf2woff — Convert ttf to woff.
ttf2woff2 — Convert ttf to woff2.
ttf2svg — Convert ttf to svg.
css — Generate css from ttf, often used to make iconfont.
svg2ttf — Convert font format svg to ttf.
svgs2ttf — Concat svg files to a ttf, just like css sprite.
otf2ttf — Convert otf to ttf.

我們的解決思路就是提供完整的字體庫(kù)ttf或者otf, 要展示的文本內(nèi)容所有字符，最終生成我們需要的web字體及樣式，這里分享出老碼的工程化示例

const Fontmin = require('fontmin')

const fontmin = new Fontmin()
    .src('./fonts/T2.ttf')  //完整的字體庫(kù)
    .use(Fontmin.otf2ttf())
    .use(Fontmin.glyph({
        text: "0123456789" //要展示的文本內(nèi)容
    }))
    .use(Fontmin.ttf2eot({
        clone: true
    }))
    .use(Fontmin.ttf2woff({
        clone: true
    }))
    .use(Fontmin.ttf2woff2())
    .use(Fontmin.ttf2svg({
        clone: true
    }))
    .use(Fontmin.css({
        fontFamily: 'x2',  //指定最終生成樣式字體名
        base64: false,
    }))
    .dest('./dist/')

fontmin.run(function (err) {
    if (err) {
        console.log(err)
    }
})

效果截圖

生成的樣式

@font-face {
    font-family: "x2";
    src: url("T2.eot"); /* IE9 */
    src: url("T2.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("T2.woff2") format("woff2"), /* chrome 36+, firefox 39+,iOS 10+, Android 67+ */
    url("T2.woff") format("woff"), /* chrome, firefox */
    url("T2.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("T2.svg#x2") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

html預(yù)覽測(cè)試

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
	<link rel="stylesheet" href="T2.css">
	<style>
		body {
			font-family: "x2";
		}
	</style>
</head>
<body>
<div>6789</div>
</body>
</html>

實(shí)際最終生成的T2.ttf由最初1.3M降低到31K

額外功能，看圖發(fā)揮想象～～～～～

類(lèi)似GUI工具推薦：

fontmin-app

https://github.com/ecomfe/fontmin-app

點(diǎn)贊、關(guān)注老碼每天分享！

在線咨詢

上一篇：JavaScript 正則命名分組
下一篇：全棧各大網(wǎng)站，歡迎大家收藏轉(zhuǎn)發(fā)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

壓縮HTML引用字體

例簡(jiǎn)介

壓縮方法

總結(jié)

您的項(xiàng)目需求