乘风破浪 激流勇进
你好!欢迎来看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 内容发布引擎
返回列表
返回顶部←