sapegin / grunt-webfont

SVG to webfont converter for Grunt
MIT License
1.1k stars 210 forks source link

1px on top left #170

Open soeiro opened 10 years ago

soeiro commented 10 years ago

Hello, first, thank's for your job.

When i do icons with grunt-webfont (Node engine on Windows 8 64bit) i had 1 pixel on top left visible with some sizes but very, very small... I tryed all options but pixel stay on Firefox, Chrome, IE... When i do same fonts with icomoon, no problème and weight is 18Ko for SVG (vs 33Ko for webfont).

Thank's for your help.

sapegin commented 10 years ago

What do you mean by “1 pixel visible”? Could you show some examples / screenshots?

soeiro commented 10 years ago

Hello, thank's for response.

My capture -> http://po.st/OlRUSI

In my capture, you can see my original SVG had no pixel problems but after webfont, some SVG had 1 pixel on top left (not in all sizes, small sizes are better to see the problem). My original SVG folder is 31,9 Ko for 33 SVG files and after Webfont result -> EOT 7 Ko, SVG 36 Ko, TTF 7 Ko, WOFF 5 Ko

After i opened this thread, i find a simple solution, i used svgmin task before use of Webfont and now, my fonts are much clean and lighter (16,4 Ko for original SVG) and final result is the same of Icomoon :) SVGmin + Webfont result -> EOT 7 Ko, SVG 18 Ko, TTF 7 Ko, WOFF 4 Ko

Thank's again for your great work... i really like this task ;)

sapegin commented 10 years ago

Does running svgmin before webfont fix the pixel problem too?

soeiro commented 10 years ago

Yes, it fix pixel problems and size of final fonts are much better for the same quality ;) Really good practice...

soeiro commented 10 years ago

I put on my server a zip with and without svgmin tests -> http://www.soeiro.org/share/SVG-Test.7z

if you want to try svgmin in grunt, you can use my config below because options are important ;)

  svgmin: {
     options: {
        plugins: 
        [{
           removeViewBox: false // If true, Fail sizes on IE
        },{
           removeUselessStrokeAndFill: true
        },{
           removeEmptyAttrs: true
        }]
     },
     svgtofonts: {
        files: [{
           expand: true,
           cwd: '<%= pkg.srcDir %>svg-to-fonts/',
           src: ['**/*.svg','!**/_Not-Used/**'],
           dest: '<%= pkg.srcDir %>svg-to-fonts/'
        }]
     }
  }, 
testerez commented 10 years ago

Thanks it works for me too. But I had to add svgmin pugin option {convertPathData: false}.

soeiro commented 10 years ago

Cool :) SVGMIN had too many plugins... https://github.com/svg/svgo/tree/master/plugins

I go to try your plugin... is important ?