CSS3 Custom Font @font-face: Convert picture icon to font

Source: Internet
Author: User

Everyone knows that browsers now support CSS3 custom fonts (@font-face), including IE6 support, except that their support for font file formats is different. So for the various icons used in the site, we can try to use font to implement, this article will explain this usage in detail.

Why do you want to make the icon font?

In many web site projects, we often use a variety of transparent small icons, and then the site to be compatible with each browser, there may be multiple sizes, and even consider the need for skin changes. Then we are going to export these small icons to a variety of sizes, colors and file formats, such as Png8 alpha Transparent or PNG8 index transparency.

For example, Twitter uses a variety of small icons:

In this case, the use of fonts to implement the icon has many advantages:

    • Font file small, general 20-50kb;
    • Easy to edit and maintain, size and color can be controlled by CSS;
    • Transparent fully compatible with IE6;
How do I turn icon into a font?

The key is that the icon in the design (to have a vector path, bitmap can not be converted) is perfectly restored to the font, which is not very troublesome.

We want to use some font editing software, such as Fontcreator, FontLab, etc., here we use FontLab to demonstrate.

The restore step is simple:

Psd–>eps–>fontlab, convert the PSD to Illustrator's EPS format, and then copy a character into the FontLab.

Specific steps:

Open the design psd and save it as Photoshop EPS format, here is an example of the expression icon in Qzone that says the box:

Open the saved EPS file in Illustrator:

Ungroup, then click an icon to copy.

Open FontLab, open a font file, such as Tahoma.ttf:

Then double-click a character, delete the original graphic, and paste the icon object you just copied:

To resize the graphic, an icon completes the restore.

It's that simple. After all icons have been restored, a font file is generated.

To view the font character, in the Font list, right-click the property (shortcut key Alt+enter) on a font to see the character that corresponds to the font:

You can see that the font corresponding to the character is I,unicode encoded is 0069.

Browser support for font format:

Currently, each browser's support for font formatting is the biggest difference:

    • Webkit/safari: Supports Truetype/opentype (. ttf), OpenType PS (. OTf), ios4.2+ support. Ttf,ios 4.2 The following only supports SVG fonts;
    • Chrome: In addition to WebKit support, start with Chrome 6 and start supporting the Woff format;
    • Firefox: Support for. TTF and. OTF, starting with Firefox 3.6 support for the Woff format;
    • Opera: Supports. ttf,. OTF,. svg. Woff not yet supported Opera 11 began to support Woff (thank Apostle Reminder ~ ~);
    • IE: Only support EOT format, IE9 start support Woff.

Note: The above information is from: Webfonts.info

Note: Woff is the latest web open fonts format (Web open font formats), the main advantage is optimized for browsers, font files are small. See Wiki for details:

Use the icon font in CSS:

First use Font-face to declare the font:

@font-face {    font-family: ' Emotion ';    Src:url (' Emotion.eot '); /* ie9*/    src:url (' Emotion.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */         URL (' emotion.woff ') format (' Woff '),/* Chrome, Firefox */         URL (' emotion.ttf ')  format (' TrueType '),/* Chrome, Firefox, opera, Safari, Android, iOS 4.2+*/         url (' emotion.svg#svgfontname ') format (' SVG ');/  * iOS 4.1-*/    }

. icon{font-family: "Emotion" Tahoma; then, it would be nice to use the font on the icon element:

. icon{font-family: "Emotion" Tahoma; ...}

<span>i</span> Finally, use this font in the page:

Support CSS3 Browser can be a little bit higher, we may not be so convenient to modify HTML each time, if you want to change an icon, you may need to modify the relevant characters, such as to change I to E and so on. If you use the pseudo-elements of CSS3, it can be a lot easier:

. icon{display:inline-block;width:16px;height:16px;/* occupies a bit of **/...}. icon:after,.icon::after{font-family: "Emotion" tahoma;display:inline-block;content: "I";/* Call the character */width:16px here; Height:16px;margin-left:-16px;/*position:absolute What can also, see the specific situation * *}

IE is still tricky: Well, it is to use the actual element placeholder, the pseudo-element +content attribute to display the icon, and then overwrite the actual element above, then we modify an icon only need to change the CSS style.

Since IE9 previously only supported the EOT format, the TTF needs to be converted to EOT, where Microsoft's official weft software can be used, and some online tools can be used:

    • http://www.kirsle.net/wizards/ttf2eot.cgi Online convert TTF to EOT format;
    • Http://www.fontsquirrel.com/fontface/generator powerful online TTF for EOT, Woff and other font formats

In addition, the EOT file must be added to the domain name whitelist before it can be used, it is recommended to use CREATEMYEOT:

Summarize:

In fact, this method has a disadvantage, that is, only support solid color icon, up to the high-end browser to achieve gradient color or graphics mask.

Of course, we have a lot of scenes with solid color icon, especially when the Metro UI in Windows 8 is starting to get more and more.

In addition, this method can effectively reduce the page request, but for the habit of using the Cssgaga Auto Sprite function of the students, this method of the page performance is not improved.

But for mobile terminals, especially in WebApp, this method still has a great application, can be easily compatible with multi-resolution, with offline storage effect is better.

Reprint please specify from the Web front-end development, this article link address: http://www.candoudou.com/archives/247
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.