Iconfont Icon Fonts

no_mkd

I. Pros and Cons of Iconfont

Pros

1. Scalability

   Screen adaptation (scaling)

2. Font Properties

   Style control (color, shadow, and even embossing)

3. Small File Size

   Generally 20-50KB, much smaller than images. For example, the typicons library has 308 icons, and the font file size is 59KB (woff) ~ 147KB (svg)

   Icon files are generally 1.5KB each (Sprite will only make the total size larger)

4. No Need for Sprite, Easy to Modify

   Saves the trouble of using Sprite, very easy to modify and replace

Cons

1. Color Limitations

   Iconfont can only be solid color or gradient color, complex icons cannot use this technology (although there are methods to achieve multi-color iconfont, but compatibility and cost are unacceptable)

2. FOUT (Flash of Unstyled Text) Problem

   The browser renders with the default font first, and after the font file is downloaded, it partially renders the text content, causing inevitable flickering

3. IE Will Block Page Rendering

   If there is a script tag before the @font-face declaration, IE will not render anything until the font file finishes downloading

4. Performance

   IE has many issues. In IE and FF, @fontface blocks window.onload. In IE, it loads regardless of whether it's used. When font loading fails (no result returned for a long time), IE will wait for 10 minutes (white screen during this period). Other browsers will render with default font or temporarily not display content. During the waiting download period, the busy indicator will always be triggered (status bar, progress bar, icon, mouse cursor)

II. Production and Generation

1. [Optional Step] PS, export path from png

2. AI, fill color, close path, save as svg

3. Online font generator

   • http://www.iconfont.cn/icons/uploadShow

   • http://fontello.com/

III. Management and Maintenance

Upload to online platform, automatically generate list view, convenient for management, for example http://www.iconfont.cn/showProject?pid=26177

IV. Font Formats and Compatibility

Font Formats

• woff: W3C recommended format, smallest size, poor compatibility

  Android 4.4+, IE9+

• ttf: Default font format for Win and Mac

  Android 4.1+, IE9+ partial support

• eot: Proposed by Microsoft, allows @fontface to embed OpenType fonts

  Android does not support, IOS does not support, IE does not support

• svg: Good compatibility, large file size

  Android 4.1+ partial support, IE9+

Font File Size

20 icons, font file sizes are respectively:

• woff: 7K

• ttf: 11K

• eot: 11K

• svg: 14K

Compatibility

• IE: Supports eot format from IE4, supports woff from IE9

• webkit/safari: Supports TrueType/OpenType (.ttf), OpenType PS (.otf), iOS 4.2+ supports .ttf, iOS 4.2 and below only supports SVG fonts, Safari 5.1+ starts supporting woff format

• Chrome: In addition to what webkit supports, from Chrome 6, starts supporting woff format

• Firefox: Supports .ttf and .otf, from Firefox 3.6 starts supporting woff format

• Opera: Supports .ttf, .otf, .svg. Opera 11 starts supporting woff

• iPad, iPhone and Android 3.0+ support SVG fonts

  Here differs from caniuse conclusion

V. Performance Optimization Principles

• Place your @font-face definition before all script tags

• If you have many font files, consider distributing them across several domains

• Do not include unused @font-face declarations—IE will load them all regardless of whether they are used

• Gzip font files, and give them a future expiration header declaration

• Consider lazy loading font files (place before body end tag), at least for IE (IE allows 10 minutes to download fonts, during this period, page is blocked)

For detailed information about @fontface performance issues, please check [Translation] @font-face and Performance

VI. Precautions

1. FF Does Not Load Cross-Origin Fonts

Place on same domain or set server headers

2. Fonts Are Bolded in Safari and Chrome

Half-pixel anti-aliasing is rendered as 1px, set CSS rule: -webkit-font-smoothing: antialiased;

3. Serious Aliasing in PC Chrome

Just blur the edges, set CSS rule: -webkit-text-stroke-width: 0.2px;

VII. Conclusion

1. Iconfont pros > cons, the convenience in reusability and maintainability is very attractive

2. The main workload in generating font library is converting png to svg

   If UI designers cooperate, it becomes very easy, and after the font library is built, it's also beneficial for UI, making design drafts more convenient. There is a PS plugin that can directly use iconfont without cutting out icons

   (Tested personally, does not support CC, CS6, skeptical about plugin quality, if plugin is unavailable, correspondence between UI design draft icons and iconfont is a small trouble)

3. Font library management is not a problem

   http://www.iconfont.cn/users/project is very convenient

4. Compatibility is not a problem

   Put all 4 formats, compatibility is sufficient

5. Performance is not very good

   But it's good enough compared to image Sprite