乘风破浪 激流勇进
你好!欢迎来看Tuziki's Planet !
小工具——字体包子集在线抽取
 作者:tutuhuang 日期:2024-01-20 
上传字体包:
拖拽文件到这里 or 点击上传
1、当前只支持ttf格式的字体文件上传,每次只能传一个字体包
 2、另外有些字体包本身是有编码格式问题,无法在这个工具使用抽取,可以更换其它字体包试试 
输入文字:
26 字字体预览:
这是一个Web在线字体包子集抽取工具,欢迎使用!!!
使用示例:
@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
下一篇: WebFlex CMS 内容发布引擎
 返回列表 
返回顶部←