Question

这些天你在每个网站上看到这些 - 现在几乎没有它们。图标字体几乎被“接管”。但是这些工具的创建至少对我来说是一个问题。

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

arrow_left.svg
arrow_right.svg

现在，我没有任何字体编辑器或图形编辑器，如Photoshop或Adobe Illustrator，以便将图标一起挑选成字体。而且我也是一个书呆子，在终端内做了95％的开发。就像创建分发等。

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

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

为了自动生成webfont，我有哪些方法/方法？我想要实现的是：

拥有我的字体的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 以外的选项适合您。

自动web- / iconfont生成

2 个答案: