logo标签列表

SVG图标转换为woff格式后外观有所不同

svgiconsgulpwoff
3
我使用 gulp-iconfont 将一组svg图标转换为woff字体格式。
在将图标转换为字体之前，它的显示效果如下： enter image description here 在woff文件中的显示效果如下： enter image description here 我的 gulp 任务如下：
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/')
  );
});

我的Illustrator导出设置：

这是图片描述

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的建议，我将它们都设置为300px x 300px，现在我得到了这个，并添加了以下选项fontHeight: 16和normalize: true。它产生了以下结果：

enter image description here

你可以发布你的SVG吗？ - Paul LeBeau
已更新描述，包含SVG代码。 - nickspiel
你的SVG看起来很好。也许gulp在解释某些路径时存在问题。你可以尝试在gulp存储库中发布此问题作为错误报告。或者，您可以尝试改用grunt。 - Paul LeBeau
问题与将此SVG转换为WOFF字体的过程有关。为什么我不应该使用WOFF？它在我所针对的浏览器中得到了很好的支持。 - nickspiel
1个回答
5
你的SVG图似乎太小了。尝试增加它们的大小或使用fontHeight（>1000）+normalize选项将其拉伸。
什么设置/尺寸最优？ - nickspiel
我尝试添加 fontHeight: 16 和 normalize: true，但图标仍然看起来奇怪。我应该改变源SVG的大小吗？如果是这样，最好使用什么宽度/高度？ - nickspiel
我将它们全部设为300像素x 300像素，现在情况变得更糟了（请参见图像编辑）。 - nickspiel
好的，我已经清空了我的node-modules文件夹，进行了全新的npm安装，将所有图标调整为300 x 300大小，添加了“fontHeight: 16;”选项，现在一切看起来都很好。看起来可能是多种因素的组合导致的问题。 - nickspiel
看起来这个方法行得通！如果你更新答案并包含这个，我会标记为正确的。感谢你的帮助和插件！ - nickspiel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接