在 Windows 上使用 Grunt 插件 grunt-webfont 生成 webfont

Question

通过我的团队合作，我们必须从 svg 文件为我们的后台生成图标的 webfont。 为了使用 Grunt 进行此操作，我们找到了一个名为“grunt-webfont”的插件。

这里是链接：grunt-webfont repository

我的问题是在 Windows 上无法正确生成我们的 webfont。我有一个小方块，而不是一个图标。

默认情况下，任务以engine 参数fontforge 开始，但它不适用于Windows。所以我尝试使用node 设置此选项（具有 ttfautohint 依赖项）。但它也不起作用。

这是我的插件配置：

dev: {
  src: '<%= project.app %>/images/pictos/*.svg',
  dest: '<%= project.app %>/styles/fonts/',
  options: {
    font: 'my-icons',
    stylesheet: 'scss',
    syntax: 'bem',
    htmlDemo: true,
    relativeFontPath: 'fonts/my/',
    engine: (grunt.option('engine') || 'fontforge'),
    templateOptions: {
      baseClass: 'my-icon',
      classPrefix: 'my-icon-',
      mixinPrefix: 'my-icon-'
    },
  }
}

我这样做似乎很好：

$ grunt serve --engine="node"

结果是：

Running "webfont:dev" (webfont) task Font my-icons-738111b522f08be9663c9b5af0606fd5 with 24 glyphs created.

但还是小方块……

我尝试将“autohint”选项设置为“false”，结果相同...

我的工作团队使用 Ubuntu 进行此操作，效果非常好！我必须在 Windows 上执行什么样的解决方案？？

谢谢。

Answer 1

您的意思是像[] 这样的小方块，或者代表您的图标的小圆点（并且在字体大小上看起来与它们相似）？

如果是小点，那可能是源 SVG 文件太小的问题。将它们的高度调整为 512 像素（画布和内部内容），重新生成字体，然后您将拥有图标。

附：我还在 Windows 上使用 grunt-webfont，这两个引擎（node/fontforge）都对我有用。

Answer 2

我在使用 Node 引擎的 Windows 中使用 Grunt Webfont 时遇到了类似的问题。大多数形状都有效，但在形状中包含大量形状只是给出了图标的轮廓。

在我自己寻找解决方案的过程中，我发现这篇文章描述了如何使用 Vagrant 从 Windows 构建字体来实现这一点： http://mac-blog.org.ua/grunt-webfont-windows/

Fontello（网站和 Grunt 插件）也有类似的问题。对于我的 svg 图标，问题似乎与填充规则有关，例如奇偶。他们有很好的文档来解释这个问题：https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images

关于我自己的旅程，我最终使用了 icomoon.io，它支持这些更高级的 svg 功能。

Answer 3

Windows 上的一些 svg 无法做到这一点。

Grunt-webfont 的Readme.md 说他们的产品不能在 Windows 上使用 Fontforge。所以你唯一的选择是Node。

另外，在Readme.md：Node 不适用于某些 SVG 文件。因此，请咨询 Ubuntu 团队，他们是否可以使用 Node 渲染您的 svg 文件而不是得到正方形。