自动 web-/iconfont 生成

Question

如今，您在每个网站上都可以看到这些 - 现在几乎没有它们。图标字体几乎已经“接管”了。但是创建这些工具是一个问题——至少对我来说是这样。

由于我有视力障碍，我与一位可以为我制作 SVG 字形的设计师合作 - 每个字形都是单独存储的。例如：

arrow_left.svg
arrow_right.svg

现在，我没有任何字体编辑器或图形编辑器（如 Photoshop 或 Adob​​e Illustrator）来将图标一起挑选成字体。而且我也是一个书呆子，95% 的开发工作都是在终端内完成的。比如创建一个发行版等等。

现在我决定要自动创建字体。随着我们逐渐接近一组我真正喜欢并认为适合在一起的图标，我觉得是时候开始将它变成一个合适的 webfont 或 iconfont。这两个术语似乎用于同一件事。

我的主要开发环境包括 Github Atom、NodeJS 和 PHP。我不使用 Gulp 或 Grunt，而是使用 NPM 脚本。

为了自动生成网络字体，我有哪些方法/方式？我想要实现的是：

• 拥有我的字体的 SVG、TTF、WOFF、EOT 文件。
• 不用担心charmap，让工具决定。
• 创建一个 CSS 文件以供使用。

Answer 1

根据您的工作流程，gulp-iconfont 可以完成这项工作https://github.com/nfroidure/gulp-iconfont

还有 CLI 变体，见https://github.com/nfroidure/svgicons2svgfont

还有 gulp-iconfont-css 可以帮助生成你的样式。

Answer 2

你可以使用webfont模块

npm install --save-dev webfont

你可以像这样使用它：

const fnt = require("webfont").default;
const fs = require("fs");

const NAME="MyFont";

fnt({
    files: "*.svg",//Provide path to svg files
    fontName: NAME
}).then(res => {
    fs.writeFileSync(NAME+".ttf", res.ttf);
    fs.writeFileSync(NAME+".eot", res.eot);
});

据我所知，在这个模块的参数中，您可以根据文件名称对文件进行排序。所以你可以用同样的方式手动读取文件；按名称排序并为它们创建一个 CSS 文件。可能不难，但我不确定这个模块是否可以自动完成。

还有另一个名为 FontForge 的工具在视觉上效果很好。据我所知，您可以在没有 GUI 的情况下使用 Python 连接到它。当然，如果 NodeJS 以外的选项适合您。