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中使用它时

它在下面的屏幕截图中显示了类似这样的内容

​

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

Answer 1

这是对SVG图标的坐标进行舍入的TTF的常见问题，您必须设置更高的字体大小参见选项：https://github.com/nfroidure/gulp-iconfont#options