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

Question

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

但是在我用 grunt webfont 将它转换为网络字体之后

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

但在 webfont 中它看起来真的很奇怪(除了轮廓外一切都是透明的)

这是一个 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 上(所有其他字体看起来都不错:其中一些是我的，一些是从其他来源获取的)。但我不知道出了什么问题。

附言我试图包括所有相关和不相关的详细信息，但如果您需要其他信息(或者我忘记了其他信息)，请告诉我。

Answer 1

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

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

但是我的猜测是 SVG 到 webfont 转换器实用程序不理解该规则，并且只查看在形状本身上定义的属性。如果我是对的，将黑色 pawn body 形状的填充显式设置为黑色可能会解决您的问题。

---

我还注意到您处理黑色棋子 ARM 的方式有点奇怪。你已经做了一个零碎的形状，并通过绘制一大堆(我数了 25 个)粗短的笔触来填充它。字体渲染器期望使用封闭的填充形状来定义字形。不这样做可能会导致问题。理想情况下， ARM 应该是一个单一的填充形状。另一方面，它可能工作得很好。