css - 我的 gulp iconfont 呈现得像一个丑陋的实时跟踪图标

Question

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

我的 HTML:

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

Rendered font .svg file .

谁能帮我解决这个问题？

Answer 1

作为I see ，你所有的图标都感觉不舒服。要修复它，请将 fontHeight 设置添加到 gulp-iconfont 配置中:

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