本文最后更新于 <span id="expire-date"></span> 天前,文中部分描述可能已经过时。

想要自定义字体吗?
字体太大?
担心字体拖慢加载速度?
快来使用 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"]) //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 请参照店长自定义字体教程

最终效果

2021-12-30-08-26-48

注:字体越大压缩效果越好

2021-12-30-08-23-00

从此可以肆无忌惮的使用自定义字体了

本文作者:wxy

本文链接: https://c.undf.top/posts/79e22e25/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

评论,秒回。

评论

如评论失效,请点击最下方的邮件图标联系作者。