我正在使用此工作流程制作图标字体：
- 使用 Sketch 应用程序设计图标
- 使用 gulp-sketch 生成 SVG
- 使用 gulp-iconfont 生成图标字体
结果在 OSX 浏览器中看起来不错，但在其他浏览器中图标看起来很糟糕（至少在 windows 和 android 上的浏览器）。
我不知道在 Sketch 文件或其他地方的哪一步是错误的。
先感谢您。
理解这个问题的资源：
这是草图应用程序文件的屏幕截图。所有路径都被展平并很好地组织成一个组合形状：
这是windows10+explorer中resut的截屏：http: //contraindicaciones.net/secciones/
这是 OSX+Firefox 中结果的截屏：
这是整个 gulpfile.js：
const
gulp = require('gulp'),
rename = require('gulp-rename'),
sketch = require('gulp-sketch'),
iconfont = require('gulp-iconfont'),
consolidate = require('gulp-consolidate'),
async = require('async'),
runTimestamp = Math.round(Date.now()/1000)
/**
* Font settings
*/
const
// set name of your symbol font
fontName = 'contraindi',
// set class name in your CSS
className = 's',
// you can also choose 'foundation-style'
template = 'fontawesome-style',
// you can also choose 'symbol-font-16px.sketch'
skethcFileName = 'symbol-font-16px.sketch'
/**
* Recommended to get consistent builds when watching files
* See https://github.com/nfroidure/gulp-iconfont
*/
const timestamp = Math.round(Date.now() / 1000)
gulp.task('symbols', () =>
gulp.src('assets/sketch/*.sketch')
.pipe(sketch({
export: 'artboards',
formats: 'svg'
}))
.pipe(gulp.dest('dist/SVGs/')) // salvar los SVG en una carpeta (aunque no es necesario)
.pipe(iconfont({
fontName,
prependUnicode: true,
formats: ['ttf', 'eot', 'woff', 'woff2'],
timestamp,
//log: () => {} // suppress unnecessary logging
}))
.on('glyphs', (glyphs) => {
const options = {
className,
fontName,
fontPath: '../fonts/', // set path to font (from your CSS file if relative)
glyphs: glyphs.map(mapGlyphs)
}
gulp.src(`assets/templates/${ template }.css`)
.pipe(consolidate('lodash', options))
.pipe(rename({ basename: fontName }))
.pipe(gulp.dest('dist/css/')) // set path to export your CSS
// if you don't need sample.html, remove next 4 lines
gulp.src(`assets/templates/${ template }.html`)
.pipe(consolidate('lodash', options))
.pipe(rename({ basename: 'sample' }))
.pipe(gulp.dest('dist/')) // set path to export your sample HTML
})
.pipe(gulp.dest('dist/fonts/')) // set path to export your fonts
)
gulp.task('watch', () => gulp.watch('assets/sketch/*.sketch', ['symbols']))
/**
* This is needed for mapping glyphs and codepoints.
*/
function mapGlyphs(glyph) {
return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) }
}