I love symbol fonts. My new favorite is Font Awesome, an open source font with over 300 icons. Symbol fonts are great because they are pure vectors. They scale with everything else in your page and look pixel perfect on any DPI display, retina or otherwise.
However, sometimes I really just need an image. While working on an iOS application I wanted to use an image for a button. Finding decent iOS icons can be tricky, but Font Awesome matches the new iOS 7 look pretty well. Of course Font Awesome is a vector font and I need an PNG? What to do.. What to do..?
Well, I could have used Photoshop to rasterize that one glyph, but that's kind of a pain. Especially if I have to go through the whole process for multiple glyphs. What I want is a rasterizer that will generate an image for every glyph in a font. I hoped someone had already done this for Font Awesome, but I couldn't find one. Sometimes you've just got to do it yourself.
So this is my font slicer.
Please Click to view the demo.
The FontSlicer is a pure HTML5 app with everything done client side. I first tried to find a NodeJS server side rasterizer but in the end just went with HTML5 Canvas.