css3 module in the @ font-face custom fonts

A, @ font-face module Introduction

　　@ font-face is CSS3 in a module, he mainly to their own definition of embedded Web fonts into your web page, along with @ font-face appeared module, use the font in Web development can no longer use the Web safe fonts.

1, @ font-face syntax rules

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

2, @ font-face Parameter Description

　　font-family parameter: Specifies the font name of the custom, it is best to use the default font download.

　　Parameters source: Specifies the font custom storage path can be relative or absolute path.

　　format parameter: specifies a custom font format is mainly used to help identify a browser, mainly the following types of values: truetype, opentype, truetype-aat, embedded-opentype, avg and the like.

　　weight parameters: Specifies whether the font is bold.

　　The style parameter: specifies the font style, such as italic and so on.

3, browser compatibility

　　Browser compatibility @ font-face, involving a font format problem, different browsers support font format is inconsistent .

　　Various versions of the browsers support what kind of font formats generally described as follows:

(1) TrueTpe (.ttf) format

　　font .ttf is the most common Windows and Mac fonts, is a RAW format , so he is not site optimization , support this font browsers have [IE9 +, Firefox3.5 +, Chrome4 + , Safari3 +, Opera10 +, iOS Mobile Safari4.2 +];

(2) OpenType (.otf) format

　　.otf font is considered an original font format , which is built on the basis of TureType, so it offers more features , support this font browsers [Firefox3.5 +, Chrome4.0 +, Safari3 .1 +, Opera10.0 +, iOS Mobile Safari4.2 + ];

(3) WebOpenFontFormat (.woff) format

　　.woff Web fonts are fonts best form , he is a compressed version of an open TrueType / OpenType, but also supports separate metadata package , this font support browsers have [IE9 +, Firefox3.5 +, Chrome6 + , Safari3.6 +, Opera11.1 +];

(4) EmbeddedOpenType (.eot) format

　　.eot font is IE-specific fonts , this format can be created from a TrueType font, font support such browsers IE4 + [];

(5) SVG (.svg) format

　　.svg font is based on SVG font rendering a format that supports this font browsers have [Chrome4 +, Safari3.1 +, Opera10.0 + , iOS Mobile Safari3.2 + ].

(6) browser version compatible summary

　　In the @ font-face, we need at least .woff, .eot two formats fonts, font, etc. .svg even need to achieve more support browser versions .

Second, the use Bulletproof syntax reach more browser support

　　In order to achieve @ font-face support more browsers, Paul Irish has written a unique @ font-face syntax called Bulletproof @ font-face :

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot?') format('eot');/*IE*/
    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}

　　To make each multi-browser support, you can also write the following format:

@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 */
   }