We all know that each browser supports CSS3 Custom fonts (@ font-face), including IE6 support, but their support of the font file formats are not the same. Then the site used in a variety of icon, we can try to use the font to achieve, this article will explain in detail such usage.
Why do you want to make the font icon?
In many website projects, we often use a variety of small transparent icon, and then the site to be compatible with various browsers, there may be more than one dimension, or even consider resurfacing and other needs. So we have these small icons output for a variety of sizes, colors and file formats, such as transparent or png8 index png8 alpha transparency.
Each browser supports font format for the biggest difference:
webkit / safari: support TrueType / OpenType (.ttf), OpenType PS (.otf), iOS4.2 + support .ttf, iOS 4.2 only supports the following SVG fonts; Chrome: except webkit support from Chrome 6, I started support woff format; Firefox: support .ttf and .otf, beginning from Firefox 3.6 support woff format; Opera: support .ttf, .otf, .svg. Not yet supported woff Opera 11 started supporting WOFF (Thank you, Apostle reminds ~~); IE: only supports eot format, IE9 began to support woff.
SVG recommend a free download site
https://www.onlinewebfonts.com/icon/