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圖標上生成偏移量

回答

相關問題