自动生成web /图标字体

Question

你现在在每个网站上都能看到这些——现在几乎没有没有它们的。图标字体几乎被"接管"了。但这些工具的创造是一个问题——至少对我来说是这样。

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

arrow_left.svg
arrow_right.svg

现在，我没有像Photoshop或Adobe Illustrator这样的字体编辑器或图形编辑器来将图标组合成一个字体。我也是个书呆子，95%的开发工作都是在终端完成的。比如创建一个发行版等等。

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

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

我有什么方法/方式来自动生成一个webfont?我想实现的是:

• 有SVG, TTF, WOFF, EOT文件的字体。
• 不需要担心字符映射，让工具决定。
创建一个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之外的其他选项适合你，