Grunt-Webfont 在 CSS 中的 glyphicon 图标上生成偏移量答案

【问题标题】：Grunt-Webfont Generates offset on glyphicon icons in CSSGrunt-Webfont 在 CSS 中的 glyphicon 图标上生成偏移量
【发布时间】：2015-07-10 08:12:09
【问题描述】：

不久前，我在我的 Mac OS X Yosemite 上通过 grunt-webfont 运行 glyphicon 生成到 CSS tff。现在我要添加一个新图标，但由于某种原因，新运行后图标不再对齐。

图标应如下所示：

图片 1 中图标的大小也是错误的，25x110 但在图片 2 中应该是 50x50。

示例中的CSS如下：

.icon {
  font-family: "icons";
  font-size: 50px;
  background-color: red;
}

HTML：

<div id="icon_test" class="icon icon_movies">
</div>

还有 SVG：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#666666;}
    .st1{fill:#808080;}
    .st2{fill:#4D4D4D;}
    .st3{fill:#FFFFFF;}
</style>
<g id="GRID">
    <polygon class="st0" points="67.5,54.7 132.5,100 67.5,145.3     "/>
</g>
<g id="Layer_1">
</g>
</svg>

我的 grunt-webfont 配置也没有改变：

module.exports = {
  icons: {
    src: 'client/icons/*.svg',
    dest: 'public/fonts',
    destCss: 'public/css',
    options: {
      embed: ['ttf'],
      font: 'icons',
      types: 'ttf',
      hashes: false,
      htmlDemo: false
    }
  }
};

以前有人遇到过这个问题吗？

【问题讨论】：

标签： node.js svg gruntjs webfonts fontforge

【解决方案1】：

显然，当至少一个 sag 文件的视图框具有非 0 0 坐标时，就会发生这种情况。

【讨论】：