CSS3--Special fonts (@font-face)

1, @font-face description

@font-face is a module in CSS3 that embeds its own defined Web fonts into your Web pages.

2. @font-face Syntax

@font-face {font-family:<Yourwebfontname>; SRC:<Source>[<format>][,<Source>[<format>]]*; [Font-weight:<Weight>]; [Font-style:<style>]; }

Value:

　　　　yourwebfontname: The custom font name, preferably using the default font you downloaded, will be referenced to the font-family in your Web element. such as "font-family:" Yourwebfontname ";"

　　　　Source: The stored path of the custom font (relative, absolute)

　　　　Format : custom font formats, mainly used to help the browser to identify, its values are mainly the following types: Truetype,opentype,truetype-aat,embedded-opentype,avg, etc.;

　　　　weight, style: font weight, font style .

3, @font-face compatibility, usage

　　TURETPE (. ttf) Format:

The. TTF font is the most common font for Windows and Mac, is a raw format, so he is not optimized for websites, and browsers that support this font have "Ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios Mobile Safari4.2+ ";

　　OpenType (. OTF) Format:

The. OTF font is considered to be an original font format, built on a turetype basis, so it also provides more functionality, and browsers that support this font have "Firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios Mobile safari4.2+ ";

　　Web Open Font format (. Woff):

The. Woff font is the best format for Web fonts, he is a compressed version of an open Truetype/opentype, and also supports the separation of meta-packages, browsers that support this font have "ie9+,firefox3.5+,chrome6+,safari3.6+ , opera11.1+ ";

　　Embedded Open Type (. EoT) Format:

. EOT fonts are IE-specific fonts that can be created from TrueType fonts and browsers that support this font have "ie4+";

　　SVG (. svg) Format:

The. svg font is a format based on SVG font rendering, and browsers that support this font have "Chrome4+,safari3.1+,opera10.0+,ios Mobile safari3.2+".

　　

　　Tip: You need at least. Woff,.eot two format fonts, and even require. svg and other fonts to support more than one browsing version.

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

/*****/

font-family:'  Yourwebfontname';

Organized from:(w3cplus) CSS3 @font-face

CSS3--Special fonts (@font-face)