初
想要自定义字体吗？
字体太大？
担心字体拖慢加载速度？
快来使用 gulp-fontmin！
字体缩小 5 倍不是梦！
字体一直一来都是静态博客中比较大的文件，尤其是特殊的字体能达到 10Mb 以上，为了提高网页加载速度必须对他动手，之前尝试过字蛛，但已年久失修，现有Fontmin以及gulp-fontmin（其实也好多年了，问题不大），所以调试一下，写篇教程，然后美化一下自己的博客。
启
首先需要找到你喜欢的字体，这里不再讨论。
安装依赖（时间有点长是正常情况）
1
2
3
| npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件
npm install --save-dev gulp-fontmin
|
预
gulp安装完成后运行gulp -v检查版本
1
2
3
| $ gulp -v
CLI version: 2.3.0
Local version: 4.0.2
|
中
首先在博客根目录新建gulpfile.js
复制以下代码并按照注释修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| var gulp = require("gulp");
var fontmin = require("gulp-fontmin");
function minifyFont(text, cb) {
gulp
.src("source/font/*.ttf")
.pipe(
fontmin({
text: text,
})
)
.pipe(gulp.dest("source/fontdest/"))
.on("end", cb);
}
gulp.task("mini-font", (cb) => {
var buffers = [];
gulp
.src(["./.deploy_git/**/*.html"])
.on("data", function (file) {
buffers.push(file.contents);
})
.on("end", function () {
var text = Buffer.concat(buffers).toString("utf-8");
minifyFont(text, cb);
});
});
gulp.task("default", gulp.parallel("mini-font"));
|
潮
引入字体
1
2
3
4
5
| @font-face {
font-family: "lxk";
src: url("/fontdest/李旭科书法1.4.ttf");
font-display: swap;
}
|
Butterfly 请参照店长自定义字体教程
终
最终效果
注：字体越大压缩效果越好
从此可以肆无忌惮的使用自定义字体了
