gulp-iconfont生成奇怪的字体

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

它在下面的屏幕快照中显示了类似的内容

如何解决它以使正确的图标显示正确显示？

Answer 1

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