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

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

The red box is where the icons should be.

的图标应该是这样的：

Icons centered

的图像1图标的大小也是错误的，25x110但在图像2 50×50，因为他们应该。

例子中的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>

我咕噜-web字体配置也不变：

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

有没有人遇到过这个问题？

来源

2015-07-10 Hiny

显然这发生在至少一个sag文件具有视图框的非0 0坐标时。

来源

2015-09-17 08:23:39 Hiny

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

回答

相关问题