HEXO&Fontmin

HEXO & Fontmin

更新时间: 2021-12-30 12:12:21
标签:

  • 🌼HEXO
  • ✏️Font
  • 📑Compose

封面

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

从此可以肆无忌惮的使用自定义字体了
g-fweVHkbl-1665061678300)]

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

[外链图片转存中…(img-lPiYv6oq-1665061678301)]

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weiekko

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值