Question

我有一个simple svg (drawn by me in illustrator)，我试图将其转换为webfont（与其他svg一起）。当我在编辑器中打开svg时，我看到它是正确的（黑色棋子用白色棋子握手）。如果我将其转换为png，也是这样。

enter image description here

但是在我使用grunt webfont

将其转换为webfont之后

   webfont: {
        icons: {
            src     : 'path/svg/*.svg',
            dest    : 'path/fonts',
            destCss : 'path/css',
            options : {
                autoHint: false,
                font    : 'icons',
                hashes  : false
            }
        }
    }

但是在webfont中它看起来很奇怪（除了大纲之外一切都是透明的）

enter image description here

以下是为其生成的example of my webfont和css：

@font-face {
    font-family: 'icons';
    url('font/icons.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icons';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon_draw:before {
    content: '\f103';
}

我坚信我的svg存在问题（所有其他字体看起来都不错：其中一些是我的，有些是从其他来源获取的）。但我不知道出了什么问题。

P.S。我试图包含所有相关和不相关的细节，但如果您需要其他东西（或我忘了别的东西），请告诉我。

Answer 1

我不熟悉grunt-webfont，所以以下只是一个有根据的猜测。

SVG定义fill属性默认为黑色。您的黑色棋子没有定义的填充，因此在适当的SVG渲染器中渲染时默认为黑色。

然而我的猜测是SVG到webfont转换器实用程序并不理解该规则，只关注在形状本身上定义的属性。如果我是对的，在黑色典当的身体形状上明确地将填充设置为黑色可能会解决您的问题。

我也注意到你完成黑色兵的手臂的方式有点奇怪。你已经做了一个零碎的形状，并通过画了很多（我的数量为25）粗短笔画来填充它。字体渲染器期望使用闭合填充形状定义字形。不这样做可能会导致问题。理想情况下，手臂应该是单个填充形状。另一方面，它可能完全正常。

从svg生成的Webfont看起来不一样

1 个答案: