SVG图标看起来被转换为WOFF

我使用gulp-iconfont一组SVG图标转换为WOFF字体后不同。SVG图标看起来被转换为WOFF

图标转换成字体之前，它看起来如下：

它是如何出现在WOFF文件：

我一饮而尽任务如下：

gulp.task('icon-font', function() { 
    gulp.src([paths.icons + '*.svg']) 
    .pipe(iconfont({ 
     fontName: 'icons', 
     formats: ['woff'], 
     timestamp: timestamp, 
     appendUnicode: true 
    })) 
    .on('glyphs', function(glyphs, options) { 
     gulp.src(paths.templates + '/_icons.scss') 
     .pipe(template({ glyphs: glyphs, timestamp: timestamp })) 
     .pipe(gulp.dest(paths.styles)); 
    }) 
    .pipe(gulp.dest(paths.fonts + 'icons/') 
); 
});

我的插画出口设置：

SVG代码：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="-183 185 32 32" style="enable-background:new -183 185 32 32;" xml:space="preserve"> 
<g> 
    <path d="M-175.6,190.5c-0.3-0.3-0.9-0.3-1.3,0c-4.7,4.7-4.7,12.4,0,17.1c0.2,0.2,0.5,0.5,0.7,0.7c0,0.1-0.1,0.2-0.1,0.3v6.7h-2.9 
     c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.6c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9h-2.9v-5.7c1.8,1.1,3.9,1.6,6.1,1.6 
     c3.2,0,6.3-1.3,8.5-3.5c0.2-0.2,0.3-0.4,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6L-175.6,190.5z M-168.3,209.3c-2.7,0-5.3-1.1-7.3-3 
     c-3.8-3.8-4-9.8-0.6-13.9l14.5,14.5C-163.5,208.5-165.9,209.3-168.3,209.3z"/> 
    <path d="M-168,192.8c3.6,0,6.6,3,6.6,6.6c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9c0-4.6-3.8-8.4-8.4-8.4 
     c-0.5,0-0.9,0.4-0.9,0.9C-168.9,192.4-168.5,192.8-168,192.8z"/> 
    <path d="M-157.8,189.1c-2.7-2.7-6.2-4.1-10-4.1c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9c3.3,0,6.4,1.3,8.7,3.6 
     c2.3,2.3,3.6,5.4,3.6,8.7c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C-153.6,195.3-155.1,191.8-157.8,189.1z"/> 
</g> 
</svg>

任何想法表示赞赏。

更新：

继@nfroidure一些建议，我让他们所有的300x300像素，现在我得到这个并添加下列选项fontHeight: 16和normalize: true。这是产生如下：

来源

2016-01-07 nickspiel

您可以发布您SVG？ –

用SVG代码更新了描述。 – nickspiel

您的SVG看起来不错。也许吞咽有一个问题，它解释来路径的方式。你可能想尝试发布这个作为一个错误的吞噬回购。或者，也许尝试使用grunt代替。 –

你SVGs似乎太小。尝试增加它们的大小或使用fontHeight（> 1000）+ normalize选项来增加它们的大小。

来源

2016-01-12 06:14:23 nfroidure

什么设置/尺寸是最佳的？ – nickspiel

我尝试添加'fontHeight：16'和'正常化：TRUE'和图标仍然看起来很奇怪。我应该改变源SVG的大小吗？如果是这样，最好使用宽度/高度是多少？ – nickspiel

我让他们所有的300x300像素，现在更是雪上加霜（参见编辑图像） – nickspiel

SVG图标看起来被转换为WOFF

回答

相关问题