沐印
415 字
2 分钟
HEXO & Fontmin

#

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

#

最终效果

2021-12-30-08-26-48

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

2021-12-30-08-23-00

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

HEXO & Fontmin
https://f.undf.top/posts/post/hexo/hexofontmin/
作者
沐印
发布于
2021-12-30
许可协议
CC BY-NC-SA 4.0