初#

想要自定义字体吗？ 字体太大？ 担心字体拖慢加载速度？ 快来使用 gulp-fontmin！ 字体缩小 5 倍不是梦！

字体一直一来都是静态博客中比较大的文件，尤其是特殊的字体能达到 10Mb 以上，为了提高网页加载速度必须对他动手，之前尝试过字蛛，但已年久失修，现有Fontmin以及gulp-fontmin（其实也好多年了，问题不大），所以调试一下，写篇教程，然后美化一下自己的博客。

启#

首先需要找到你喜欢的字体，这里不再讨论。

安装依赖（时间有点长是正常情况）

npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件
npm install --save-dev gulp-fontmin

预#

gulp安装完成后运行gulp -v检查版本

$ gulp -v
CLI version: 2.3.0
Local version: 4.0.2

中#

首先在博客根目录新建gulpfile.js

复制以下代码并按照注释修改

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"));

潮#

引入字体

@font-face {
  font-family: "lxk"; /* 字体名自定义即可 */
  src: url("/fontdest/李旭科书法1.4.ttf"); /* 字体文件路径 */
  font-display: swap;
}

Butterfly 请参照店长自定义字体教程

终#

最终效果

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

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