search

sunflowerdeath / webfonts-generator

Generator of webfonts from svg icons
The Unlicense
271 stars 152 forks source link

Poor glyphs quality #50

Closed magicznyleszek closed 6 years ago

magicznyleszek commented 6 years ago

I am trying to automate my current icomoon workflow (= ditch it). After font is being generated I noticed that glyphs went through some hardcore normalization? It's not obvious in small sizes, but it's horrific after being scaled up.

This icon was generated by webfonts-generator:

screen shot 2018-06-27 at 22 09 17

And this by icomoon website:

screen shot 2018-06-27 at 22 08 57

And this is source svg:

<svg height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m16.007 27.4453c.259-.259.424-.573.511-.904l1.51 1.51c-.168.287-.361.562-.606.808-1.373 1.372-5.497 1.662-6.31 1.706l-1.112.06.06-1.113c.044-.813.332-4.937 1.705-6.31.245-.246.521-.438.807-.607l1.51 1.511c-.33.087-.644.251-.903.51-.438.438-.835 2.161-1.026 3.855 1.687-.188 3.404-.576 3.854-1.026zm11.2437-11.3843-2.688-2.688c1.401-.983 3.133-1.373 4.042-1.373h.028c.012.807-.364 2.608-1.382 4.061zm-5.171 11.799-1.829-1.829 1.829-1.829zm-6.072-6.072 7.071-7.071 2.828 2.828-7.07 7.072zm.415-3.243-1.829 1.829-1.829-1.829zm13.727-8.07c-.324-.325-.815-.475-1.545-.475-1.462 0-4.329.691-6.233 2.596l-3.95 3.949h-6.656c-.266 0-.52.105-.708.293l-.707.708c-.391.391-.391 1.024 0 1.414l11.314 11.313c.195.196.451.293.707.293s.512-.097.707-.292l.708-.707c.188-.188.293-.442.293-.708l-.001-6.657 3.95-3.95c1.438-1.438 2.072-3.293 2.321-4.27.202-.792.587-2.721-.2-3.507z" fill-rule="evenodd"/></svg>

This is my config:

{
  files: ['jsapp/svg-icons/deploy.svg'],
  dest: 'jsapp/fonts/',
  fontName: 'k-icons',
  cssFontsPath: '../fonts/',
  css: true,
  cssTemplate: './jsapp/k-icons-css-template.hbs',
  html: true,
  htmlTemplate: './jsapp/k-icons-html-template.hbs',
  types: ['eot', 'svg', 'ttf', 'woff2', 'woff'],
  templateOptions: {
    classPrefix: 'k-icon-',
    baseSelector: '.k-icon',
    baseClassName: 'k-icon'
  },
  formatOptions: {
    svg: {
      normalize: false,
      round: 0,
    },
    ttf: {},
    woff2: {},
    woff: {},
    eot: {}
  }
}

As you can see I tried configuring all possible formatOptions - only svgicons2svgfont has some useful configuration, but it doesn't help at all.

magicznyleszek commented 6 years ago

Found the source of problem and solution: https://github.com/fontello/svg2ttf/issues/52 - the SVGs need to be in huge size (at least 1000x1000 px) for the svg2ttf to not loose quality