我的 gulp 图标字体渲染为一个丑陋的实时跟踪图标

Question

当我放大导航时，我注意到我的图标看起来不对劲。我正在使用 Gulp-iconfont(npm 包(，只有默认模板和样式，如链接中所述。

我的网页：

<li class="pageNav_metaItem">
<a href="#" class="pageNav_metaLink"><i id="open-apps-bar" class="icon-apps"></i></a>
</li>

呈现的字体 .svg文件。

任何人都可以帮助我解决这个问题吗？

Answer 1

如我所见，您所有的图标都感觉不舒服。要修复它，请将fontHeight设置添加到gulp-iconfont配置中：

// ...
.pipe(require('gulp-iconfont')({
fontName: 'icons',
formats: ['eot', 'woff', 'woff2'],
fontHeight: 1024
}))
// ...