現(xiàn)效果：

HTML 里引用組件

歡迎多多交流，請(qǐng)批評(píng)指正。

例簡(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>

SS基本概念

Cascading Style Sheet, 級(jí)聯(lián)樣式表

HTML是網(wǎng)頁(yè)的內(nèi)容/骨架

CSS是網(wǎng)頁(yè)的外衣/表現(xiàn)

文件擴(kuò)展名: .css

CSS寫(xiě)在哪

1. 行內(nèi)樣式表

<tagName style="css code here..." />

2. 內(nèi)部樣式表

<style>

selector {

css code here...

}