CSS3 Magic Hall: recognize @font-face and Font Icon

First, preface　　　

We used to beautify the site's logo, title, icon, and so on, and now we can get another more flexible way of beautification through @font-face.

Second, take a look at examples

/*definition*/@font-Face {font-family:'Microsoftyahei'; Src:url ('Microsoftyahei.eot');/*IE9 Compat Modes*/Src:url ('microsoftyahei.eot? #iefix') Format ('Embedded-opentype'),/*IE6-IE8*/URL ('Microsoftyahei.woff') Format ('Woff'),/*Modern Browsers*/URL ('Microsoftyahei.ttf') Format ('TrueType'),/*Safari, Android, IOS*/URL ('Microsoftyahei.svg#microsoftyahei') Format ('svg');/*Legacy IOS*/   }/*Use*/body{Font-family:"Microsoftyahei";}

It is very surprising to say that IE4 began to support the @font-face, but only in recent years have been widely used by everyone.

The advantage of @font-face is that even if the system does not have the font we can use it, the disadvantage is that the browser needs to download fonts, thus consuming user traffic, and the first download will cause the page opening delay.

Ii. Rules of Grammar

 /*   define font    @font -face {font -family: <      Yourwebfontname> <source> [<format>][,<source> [<format>]]*-weight: <weight>-style: <style>

font-family: <YourWebFontName> : Custom font name (generally set to the name of the font introduced), the font is referenced by that name in subsequent style rules.
src : Sets the load path and format of the font, separating multiple loading paths and formats by commas
srouce : The load path of the font, which can be an absolute or relative URL.
Format: Font formatting, mainly used for browser recognition, generally have the following several--truetype,opentype,truetype-aat,embedded-opentype,avg.
font-weight and Font-style are consistent with the previous use.
The SRC attribute also has a local (font name) field, which indicates that the font is loaded from the user's system and the Webfont is not loaded until it fails.

Src:local (font name), url ("font_name.ttf")

Three, font format

For @font-face, the compatibility issue is that each browser can recognize different font formats.
TrueType format (. ttf)
The font format that is common on Windows and Macs is a raw format, so it is not optimized for Web pages.
Browser support: Ie9+,firefox3.5+,chrome4.0+,safari3+,opera10+,ios Mobile safari4.2+
OpenType format (. OTF)
TrueType-based, but also a raw format, but provides more functionality. <br/>
Browser support: Firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+
Web Open font format (. woff)
Special optimization for Web pages, so it is the best format for Web fonts, it is a compressed version of an open Truetype/opentype, while supporting the separation of meta-packets. <br/>
Browser support: ie9+, firefox3.5+, chrome6+, safari3.6+,opera11.1+
Embedded Open type format (. eot)
IE Special font format, this format font can be created from the TrueType format.
Browser support: ie4+

SVG format (. svg)
The format based on the SVG font rendering.
Browser support: chrome4+, safari3.1+, opera10.0+, IOS Mobile safari3.2+

To address compatibility issues, Paul Irish wrote a unique @font-face syntax called Bulletproof:

@font-Face {font-family:'Yourwebfontname'; Src:url ('Yourwebfontname.eot');/*IE9 Compat Modes*/Src:url ('yourwebfontname.eot? #iefix') Format ('Embedded-opentype'),/*IE6-IE8*/URL ('Yourwebfontname.woff') Format ('Woff'),/*Modern Browsers*/URL ('Yourwebfontname.ttf') Format ('TrueType'),/*Safari, Android, IOS*/URL ('Yourwebfontname.svg#yourwebfontname') Format ('svg');/*Legacy IOS*/   }

Iv. Getting Web Fonts

Download. ttf format fonts to Google Web fonts and dafont.com, and then use the font squirrel to generate fonts in. Woff and other formats.

Web fonts can also be obtained from the following sites:

http://webfonts.fonts.com/

http://typekit.com/

http://kernest.com/

http://nicewebtype.com/fonts/

Five, matters needing attention

1. @font-face Follow the first defined after use principle;

2. Because the Chinese font is too large, it is suggested that if the Chinese logo or the use of pictures. And the English logo can use @font-face instead of pictures;

3. @font-face Invalid may be the font loading path error;

4. The @font-face font loading path in Firefox may fail when using a relative path, for the following reasons and workarounds:

a). Use an absolute path to solve the problem;

b). In the case of File URI scheme (file:///), because the default file URI for Firefox origin policy is very strict, different path levels are inaccessible. So the relative path is considered a cross-domain operation, so the font load fails. You can enter the browser settings interface via about:config and set the security.fileuri.strict_origin_policy to false;

c). In the case of Http/https URI scheme (http:///or https:///), you need to add a response header to the. EoT,. ttf, and. Woff Font Files access-control-allow-origin : * , which allows cross-domain requests.

VI. Font Icon

You should use a symbol entity such as &copy; to display some symbols on the page that cannot be entered directly through the keyboard. But this kind of symbolic entity is cured in the browser, there is no way to customize it, so we tend to use the picture instead. However, by using the @font-face to implement the font Icon, we can customize and use various symbol entities-these symbolic entities should be called Web entities correctly.

Web entities do not have to be represented in &entity_name , & #entity_number as HTML entities, but are more flexible representations (such as the letter A represents a font icon, etc.)

First we want to get the font that was designed for the font icon

1. Guifx fonts

2. Websymbols fonts

3. Font Awesome

The icon is replaced by the Robmadole and Supercodepoet two masters on the basis of the bootstrap icon for the font icon.

Then you can use it as a second section. When the font-family value of an element is the defined @font-face, the characters under that element are automatically rendered as the corresponding font Icon.

Seven, custom font Icon

Since the entire font library needs to be downloaded using the established web Font library, there are only a few font icons that are actually used, so you can personalize and reduce the font library volume by customizing font icon.

Tools: Fontomas provides four fonts to make icon. Entypo,iconicfill,iconicstroke,websymbolsregular, respectively.
Fontomas offers SVG format fonts, and we can generate fonts in other formats with Fontsquirrel or Onlinefontconverter.

Viii. Summary

Please correct me if there is any mistake, thank you.

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/4320083.html ^_^ Fat Boy John

Nine, reference

Http://www.w3cplus.com/content/css3-font-face
Http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
Http://www.dynamicdrive.com/forums/showthread.php?63628-font-face-not-working-in-Firefox-5
Http://www.w3cplus.com/css3/web-icon-with-font-face
http://www.webhek.com/tag/web-font/
Http://www.paulirish.com

CSS3 Magic Hall: recognize @font-face and Font Icon