Question

随着我的团队工作，我们必须为svg文件生成一个webfont图标，用于我们的后台。为了使用Grunt，我们找到了一个名为“grunt-webfont”的插件。

我的问题是在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

在Windows上使用某些svg无法完成。

Grunt-webfont的Readme.md表示他们的产品不适用于Windows上的Fontforge。所以你唯一的选择是Node。

此外，在Readme.md：节点不适用于某些SVG文件。因此，请与Ubuntu团队联系，了解他们是否可以使用Node呈现您的svg文件，而不是获得正方形。

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

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

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

P.S。我也在Windows上使用grunt-webfont，两个引擎（node / fontforge）都以某种方式为我工作。

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

3 个答案: