search

fontello / svg2ttf

SVG -> TTF font convertor
MIT License
521 stars 79 forks source link

Icon font is distorted when converted to TTF #18

Closed nzbart closed 10 years ago

nzbart commented 10 years ago

I have an SVG icon font that displays as a nice circle with a question-mark in the middle when rendered in Chrome. However, when converted to TTF format using svg2ttf, the icon is distorted.

Below is the source SVG font:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <font id="font-icons" horiz-adv-x="32">
    <font-face font-family="font-icons"
      units-per-em="32" ascent="32"
      descent="0" />
    <glyph glyph-name="info"
      unicode="&#xE00C;"
      horiz-adv-x="32" d=" M15.805 30.718C7.674999999999999 30.609 1.173 23.931 1.282 15.801000000000002C1.391 7.676000000000002 8.068999999999999 1.1720000000000041 16.198999999999998 1.2810000000000024C24.324999999999996 1.3900000000000041 30.829 8.068000000000001 30.718999999999998 16.198C30.612 24.324 23.933 30.827 15.804999999999998 30.718000000000004zM15.762 7.039999999999999H15.68C14.429 7.076999999999998 13.546 8 13.581 9.233999999999998C13.616 10.444999999999997 14.52 11.326999999999998 15.731 11.326999999999998L15.805 11.325C17.091 11.286999999999999 17.965 10.372999999999998 17.927 9.104C17.892 7.890000000000001 17.001 7.039999999999999 15.762 7.039999999999999zM21.027 17.491C20.731 17.073 20.085 16.552999999999997 19.269000000000002 15.918L18.37 15.297C17.877000000000002 14.913 17.580000000000002 14.553 17.469 14.199000000000002C17.379 13.917000000000002 17.338 13.845000000000002 17.330000000000002 13.277000000000001L17.328000000000003 13.131H13.899000000000003L13.909000000000002 13.422C13.951000000000002 14.616 13.981000000000002 15.315999999999999 14.475000000000003 15.897000000000002C15.251000000000003 16.807000000000002 16.963000000000005 17.910000000000004 17.035000000000004 17.956000000000003C17.280000000000005 18.142000000000003 17.486000000000004 18.351000000000003 17.641000000000005 18.575000000000003C18.001000000000005 19.071000000000005 18.159000000000006 19.463 18.159000000000006 19.845000000000002C18.159000000000006 20.378 18.001000000000005 20.871000000000002 17.689000000000007 21.309000000000005C17.38800000000001 21.733000000000004 16.817000000000007 21.947000000000003 15.991000000000007 21.947000000000003C15.172000000000008 21.947000000000003 14.612000000000007 21.686000000000003 14.276000000000007 21.153000000000002C13.929000000000007 20.604000000000003 13.756000000000007 20.03 13.756000000000007 19.441000000000003V19.294000000000004H10.220000000000008L10.226000000000008 19.448C10.317000000000007 21.614000000000004 11.090000000000009 23.173000000000002 12.524000000000008 24.083000000000002C13.423000000000009 24.664 14.543000000000008 24.957 15.849000000000007 24.957C17.559000000000008 24.957 19.006000000000007 24.541 20.142000000000007 23.722C21.294000000000008 22.892000000000003 21.878000000000007 21.647000000000002 21.878000000000007 20.024C21.878000000000007 19.115000000000002 21.592000000000006 18.262 21.027000000000008 17.488z" />
  </font>
</defs>
</svg>

I converted this .SVG file to .TTF using the following command line:

node node_modules\svg2ttf\svg2ttf.js font-icons.svg font-icons.ttf
puzrin commented 10 years ago

You certaintly try to do strange things with this convertor :) . TTF has integer coords. EM=32 is too small to get good precision after round. It should be 500-4000. Fontello uses 1000.

nzbart commented 10 years ago

Thanks for your patience! It may seem like I'm trying some odd things - but all I'm trying to achieve is to generate .woff fonts from some svg images from http://icomoon.io/ using Gulp. Who'd have thought it'd be so hard :)

puzrin commented 10 years ago

if you wish to do it with code, look at https://github.com/fontello/svgpath lib. Or you can import images to fontello custom icons (if those have single path and no transforms), and then cut data from generated svg font.

nzbart commented 10 years ago

The solution I used was to call the gulp-iconfont plugin with a fontHeight of 1000 and normalize set to true. This solved the rounding error. Thanks for pointing out the cause of the problem, so that I was able to find this solution.

hzsrc commented 5 years ago

The solution I used was to call the gulp-iconfont plugin with a fontHeight of 1000 and normalize set to true. This solved the rounding error. Thanks for pointing out the cause of the problem, so that I was able to find this solution.

Thanks a lot, good solution!