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

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

上传字体包:

拖拽文件到这里 or 点击上传
1、当前只支持ttf格式的字体文件上传,每次只能传一个字体包
2、另外有些字体包本身是有编码格式问题,无法在这个工具使用抽取,可以更换其它字体包试试

    输入文字:

    26 字

    字体预览:

    0% 本地字体包正在加载
    这是一个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

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