乘风破浪 激流勇进
你好!欢迎来看Tuziki's Planet !

小工具——字体包子集在线抽取

使用示例:

@font-face {
  font-family: 'CustomFont';
  src: url('../assets/fonts/CustomFont.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

工具介绍:

可实现字体子集的在线抽取,打出精简版的子集字体包文件,使用百度 Fontmin-v0.2.0做工程集成:

官网:http://ecomfe.github.io/fontmin/

Github:https://github.com/ecomfe/fontmin

const Fontmin = require("fontmin");
var rename = require("gulp-rename");
const fontmin = new Fontmin()
    .src(localTTFPath)
    .dest(destPath)
    // .use(Fontmin.ttf2svg()) // 转换为 WOFF 格式
    .use(
        Fontmin.glyph({
        text: words,
        hinting: true, // keep ttf hint info (fpgm, prep, cvt). default = true
        })
    )
    .use(rename(`${fontName}-lite.ttf`));

fontmin.run(async function (err, files) {
    if (err) {
        console.error(err);
    }
    // console.log(files[0]);
});


集成到项目工程中去:

安装fontmin: npm install fontmin --save

在package.json中新增操作指令:

“scripts”: {
  ......
  “fontmin”: “node fontmin.js”
  },


根目录下新建文件fontmin.js,并设置好字体源文件目录和子集字体包输出目录:

// 字体包 生成
// 参考文档 https://github.com/ecomfe/fontmin

import Fontmin from "fontmin";
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const localTTFPath = path.join(__dirname, 'public/fonts/*.ttf');
const destPath = path.join(__dirname, 'src/assets/fonts');
console.log(localTTFPath);
console.log(destPath);
// console.log(process.env.NODE_ENV);

const words = '五十六个星座,五十六枝花'
// console.log(words);
try {
  const fontmin = new Fontmin()
    .src(localTTFPath)
    .dest(destPath)
    // .use(Fontmin.ttf2svg()) // 转换为 WOFF 格式
    .use(
      Fontmin.glyph({
        text: words,
        hinting: true, // keep ttf hint info (fpgm, prep, cvt). default = true
      }),
    )
  fontmin.run(async function (err, files) {
    if (err) {
      console.error(err)
     // return res.status(500).send({ message: 'Error 字体包生成错误', error: err })
    }
    // console.log(files[0]);
    // => { contents: <Buffer 00 01 00 ...> }
  })
} catch (error) {
  // 错误处理
  console.log({ message: 'Error 字体包生成', error })
}  

执行指令:npm run fontmin

标签:小工具
返回列表
返回顶部←