少し前に、Mac OS X Yosemite で grunt-webfont を介してグリフィコン生成を 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
}
}
};
以前にこの問題に遭遇した人はいますか?