整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
現效果：
HTML 里引用組件
歡迎多多交流，請批評指正。
有些網站為了凸顯某部分字體，而引入自定義字體，但由于自定義字體相對都比較大（幾M），導致頁面加載緩慢；所以本文介紹三種壓縮字體的方法，可根據項目情況自行選擇。
1、利用Fontmin程序（效果如下圖）
1）運行Fontmin程序后，1位置輸入需要生成的文字內容，2位置拖入ttf文件（源文件7947KB）;
2)點擊“生成”按鈕，生成成功后，彈出生成文件（ttf文件變成11KB），根據瀏覽器兼容性引入文件。
Tips：當需要增加新的文字時，需要重新生成文件。
2、利用Node.js+Fontmin組件（效果如下圖）
1）配置好Node.js框架（本文使用Express）；
2）在index.js文件增加代碼，用來自動讀取“views”下面的所有*.ejs文件的文字，然后根據“src”的ttf源文件，使用Fontmin組件生成壓縮文件（生成目錄“dest”）。
Tips：適用于多文件情況下，自動匯總生成。
// 遍歷所有文件提取里面的所有文字
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 -g2）新建index.html文件；
3）執行下面命令生成壓縮文件。
font-spider ./*.html可以根據項目實際情況，選擇適當的方法。
Cascading Style Sheet, 級聯樣式表
HTML是網頁的內容/骨架
CSS是網頁的外衣/表現
文件擴展名: .css
1. 行內樣式表
<tagName style="css code here..." />
2. 內部樣式表
<style>
selector {
css code here...
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
