Question

我正在使用此工作流制作图标字体：

使用Sketch app设计图标
使用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) }
}

Answer 1

我发现了问题。它是在草图应用程序文件中。在“图层”菜单中，有一个“路径/反向顺序选项”。我应该使用此选项，直到子路径的方向必须与其父路径相反。

我还不知道如何知道Sketch中路径的实际方向，但这是另一个问题。

在图标字体的符号中的路径方向

1 个答案: