gulp-iconfont генерирует необычный шрифт - PullRequest
Новая
       6

gulp-iconfont генерирует необычный шрифт

0 голосов
/ 19 марта 2019

У меня проблема с этой задачей 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

это показано примерно так на скриншоте ниже enter image description here

Как я могу исправить это, чтобы иметь правильное отображение значка instread?

1 Ответ

0 голосов
/ 20 марта 2019

Это распространенная проблема с TTF, которая округляет координаты значков SVG, вы должны установить больший размер шрифта, см. Параметры: https://github.com/nfroidure/gulp-iconfont#options

...