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

Question

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

使用 Sketch 应用程序设计图标
使用 gulp-sketch
使用gulp-iconfont

结果在 OSX 浏览器中看起来不错，但图标在其他浏览器中看起来很糟糕（至少 windows 和 android 上的资源管理器）。

我不知道是哪一步出了问题，是在 Sketch 文件中还是在其他地方。

提前致谢。

理解这个问题的资源：

这是 sketch 应用程序文件的屏幕截图。所有路径都被展平并很好地组织成一个组合形状：

这是 windows10+explorer 中结果的屏幕截图： 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

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

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

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

Path direction in symbols of icon font

icon-fonts

gulp

sketchapp