Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inverted glyph: bitmap > SVG via autotrace > glyph via fontforge

I am trying to create a font/glyph by:

  • taking a bitmap image
  • creating an SVG with autotrace (on Linux)
  • importing the outline as a glyph with python-fontforge (glyph.importOutlines(svgfile) )

This works fine except that the resulting glyph in inverted (see images). Any idea how this can be prevented, how the SVG or glyph can be inverted, or anything like that?

Source bitmap: source bitmap

Autotraced SVG: enter image description here

Resulting font: enter image description here

like image 402
Hoff Avatar asked Oct 03 '12 17:10

Hoff


2 Answers

solved this simply by using potrace instead of autotrace.

for reference, these are the steps:

convert bitmap to svg (linux command line):

potrace -s sourceimg.bmp

use svg as glyph (python):

import fontforge
font = fontforge.open('blank.sfd')
glyph = font.createMappedChar('A')
glyph.importOutlines('sourceimg.svg')
font.generate('testfont.ttf')

That's it, result below for use on a website:

css:

@font-face
{
font-family: testfont;
src: url('testfont.ttf');
}

html:

<span style="font-family:testfont; font-weight:normal; color:green;">A</span>
<span style="font-family:testfont; font-weight:bold; color:green;">A</span>

enter image description here

like image 176
Hoff Avatar answered Oct 23 '22 10:10

Hoff


You could try to reverse the path, not sure if there's an option in fontforge that let's you do that, but you can do it with inkscape (Path > Reverse).

like image 31
Erik Dahlström Avatar answered Oct 23 '22 09:10

Erik Dahlström