@atlowchemi/webfont-生成器

土生土长 国家行动计划 添加从一组SVG图标文件中生成webfonts(SVG,TTF,EOT,WOFF,WOFF2)及其相伴的CSS/HTML.

添加器选择 Rust 引擎的 fs 能力(包括所需 async ),其中引擎默认值被禁用. 货物特性选择为内部 adton; npm 消费者使用此处所记录的基于文件的JavaScript API. 原生WOFF压缩使用引擎的静态zlib后端. 递增成果也支持单一文件 add, (中文(简体) ), update,以及 remove 无助手 转会成员,加 addAsync编号 :updateAsync编号 :removeAsync 返回替换结果. 见 单文件动作。 。 。 . 对于浏览器应用程序,使用 @atlowchemi/webfont-browser-generator,该船预编 WASM,在工人中经营SVG文本生成.

这是重新编剧 @vusion/webfonts-generator 在"Rust"中——最初的软件包及其作者值得称赞的是这个项目所依赖的API设计和模板系统. 联合来文的执行没有持续进行,因此,这个一揽子方案在本土重新实施同样的管道,以提高业绩和长期维持能力.

API基本上与 @vusion/webfonts-generator,但有一些差异:

• 这个 cssContext 财务报告和审定财务报表 htmlContext 调用只接收上下文对象。 原稿也通过了 options 编辑 handlebars 这些论点已经不复存在.
• formatOptions 现在严格输入为 { svg?: SvgFormatOptions; ttf?: TtfFormatOptions; woff?: WoffFormatOptions; woff2?: Woff2FormatOptions }。最初接受的任意性 { [format]: unknown }; 数据 eot 键不再被接受(EOT来自TTF输出).
• 一个新的 optimizeOutput 选项在组合字体之前将 SVG 路径优化到每个格片上。 默认为 false;优化可能减少SVG路径数据,但不保证较小的二进制字体输出,因此比较您输入集生成的大小. 也可用 formatOptions.svg.optimizeOutput。 。 。 .
• formatOptions.woff2.compressionQuality 为 WOFF2 输出设置 Brotli 压缩质量 (0–11) 。 默认为 11 (产出最小); 降低(例如: 10)用于以边际尺寸成本进行更快的编码.
• 一个新的 incremental 选项(默认) false)保留关于结果的解析甘油数据,以便 result.regenerateAsync(files, changes?) 可以在文件更改后重建,而无需重新解析没有更改或屏蔽节点.js事件循环的glyphs. 它刷新了记忆中的产出,当产生结果时 writeFiles,将刷新过的字体写入磁盘,同时跳过不变的 CSS/HTML 配套文件。 您通过完整文件集( 按新构建使用的顺序) 加上变化, 或省略 changes 重读/重打整集并推断变化;结果与新鲜的字节相同 generateWebfonts() 包括增加部分.
• 生成的字体二进制(TTF,WOFF等)在字节级别上可能有所不同,因为使用了不同的编码器,但字体同样有效.
• CSS,HTML,和模板输出完全相同.
• 一个新的 variants 选项支持具有离散设计的多重量家庭.
• 一个新的 colorGlyphs 选项为 TTF 、 WOFF 和 WOFF2 中选定的格子保留固态 SVG 颜色.
• colorSlots,例如 { secondary: '#ff9900' },保留 CSS 轻/暗主题的调色板条目。 需要活动 colorGlyphs; 槽使用不同的 #RRGGBB 颜色和 ASCII 字母数字/连字符/分数名称。 索引遵循 ASCII 名称顺序,并在 CSS 上下文中被曝光 colorSlots 地图。 见 现场实例。 。 。 .

与甘油计数相比,性能尺度更好——对于更大的图标设置本地管线来说,速度要快得多.

安装和使用

npm install @atlowchemi/webfont-generator

以下平台上的消费者不需要"Rust"或"Cargo". 保持可选的依赖性 启用后, 您的软件包管理器将安装匹配的本地二进制 .

import { generateWebfonts } from '@atlowchemi/webfont-generator';

const result = await generateWebfonts({
    files: ['./icons/home.svg', './icons/search.svg'],
    dest: './dist/fonts',
    fontName: 'my-icons',
    types: ['woff2', 'woff'],
});

const css = result.generateCss();
const html = result.generateHtml();

递增再生

多体重家庭也支持逐步建设。 设定 incremental: true,然后使用 regenerateAsync({ variants: [{ variant: 'bold', files: [...] }, ...] }, changes) 与每个配置的设计完整的文件列表。 奥米 changes 重新调整每个设计。 见 变量再生参考 用于输入形状、同步替代和失败语义.

let files = ['./icons/home.svg', './icons/search.svg'];
let result = await generateWebfonts({ files, dest, fontName: 'my-icons', incremental: true });

// On a watch event, rebuild reusing cached geometry for unchanged glyphs. Pass the full file set
// (in fresh-build order) so additions land in the right position, plus what changed:
result = await result.regenerateAsync({ files }, [{ path: './icons/home.svg', changeType: 'changed' }]);
// Or omit changes when watcher hints are unavailable/untrusted:
result = await result.regenerateAsync({ files });
result.woff2; // refreshed bytes

第一个参数是更改后设置的完整文件,按照一个新构建会使用的顺序(如您 glob results)——任何从它中省去的文件都会被删除. 每个变化是 { path, changeType: 'added' | 'changed' | 'removed', name? }时 name 是解析的 glyph 名称, 如果您应用了自定义重命名; 否则添加的文件会从文件干中获取其名称, 更改的文件会保留其当前名称, 并删除的文件会忽略它 。 何时 changes 删除或 null,每个当前文件都会被重读和散列,并自动推断变化. regenerateAsync() 返回替换结果;在工作进行期间和失败后,接收器可读且保持不变。 在开始另一起重建之前指定替换,因为来自同一结果分界线的重叠电话被拒绝。 磁盘写的不是交易式的 。 同步而变异 regenerate() 当屏蔽事件回路为可接受时,方法仍然可用。 所产生的结果 cssContext 或者说 htmlContext 调用无法重生成, 因为这些 JavaScript 调用无法在重建期间重运行 .

模板

默认 CSS、 SCSS 和 HTML 模板可通过 /templates 导出 :

import * as templates from '@atlowchemi/webfont-generator/templates';

console.log(templates.css); // path to default CSS template
console.log(templates.scss); // path to default SCSS template
console.log(templates.html); // path to default HTML template

文档

见 节点.js 参考 为完整的API. 关于直接Rust或命令行的使用,请参见单独的 引擎边框。 。 。 .

许可证

麻省理工学院