gulp-iconfont生成wird字体

Question

我有一个关于字体生成的gulp任务的问题

import path from 'path';
import gulp from 'gulp';
import iconfont from 'gulp-iconfont';
import iconfontCss from 'gulp-iconfont-css';
import config from './gulpfile.config';
import del from 'del';

//Compile svg files to icons font
gulp.task('iconfont', function(){
    gulp.src([`programs/${config.programs}/assets/svg-icons/ *.svg`])
        .pipe(iconfontCss({
            fontName: `${config.programs}`,
            path: 'node_modules/gulp-iconfont-css/templates/_icons.scss',
            targetPath: `../../../programs/${config.programs}/styles/base/_icons.scss`,
            fontPath: '../fonts/'
        }))
        .pipe(iconfont({
            fontName: `${config.programs}`, // required
            prependUnicode: false, // recommended option
            //prependUnicode: false,
            formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'],
            // centerHorizontally: true,
            // normalize: true,
            // fontHeight: 1001,
            timestamp: Math.round(Date.now()/1000) // recommended to get consistent builds when watching files
        }))
        .pipe(gulp.dest(`programs/${config.programs}/fonts`))
});

并且它生成字体但是当我在html中使用它时

它在qazxsw poi下面的截图中显示了类似的内容

如何修复它才能显示正确的图标？

Answer 1

这是围绕SVG图标坐标的TTF的常见问题，您必须设置更高的字体大小，请参阅选项：