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

【问题标题】：Webfont generated from svg does not look the same从 svg 生成的 Webfont 看起来不一样
【发布时间】：2014-09-14 17:20:15
【问题描述】：

我有一个simple svg (drawn by me in illustrator)，我正在尝试将其转换为网络字体（与其他 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 上（所有其他字体看起来都不错：其中一些是我的，一些来自其他来源）。但我不知道出了什么问题。

附：我试图包含所有相关和不相关的详细信息，但如果您需要其他内容（或者我忘记了其他内容），请告诉我。

【问题讨论】：

标签： css svg gruntjs webfonts adobe-illustrator

【解决方案1】：

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

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

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

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

【讨论】：