Font-face Grammar Rules
{ font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>];}
1. Yourwebfontname: This value refers to the name of your custom font, preferably using the default font you downloaded. such as "font-family:" Yourwebfontname ";
2. Source: This value refers to the storage path of your custom font, either a relative path or an absolute path
3. Format: This value refers to the formatting of your custom font, mainly used to help the browser to identify the following types of values are mainly: TrueType, OpenType, Truetype-aat, Embedded-opentype, AVG, etc.
Several formats for fonts
One, Turetpe (. ttf) format
The. TTF font is the most common font for Windows and Mac and is a raw format, so he is not optimized for the site
Supported browsers are [ie9+, firefox3.5+, chrome4+, safari3+, opera10+, IOS Mobile safari4.2+]
Second, OpenType (. OTF) format
The. OTF font is considered to be an original font format, built on the turetype basis, so it also provides more features that support this font for browsers that have
[firefox3.5+, chrome4.0+, safari3.1+, opera10.0+, IOS Mobile safari4.2+]
Third, Web Open Font format (. woff)
The. EoT font is an IE-specific font that can be created from TrueType
[ie4+]
Iv. svg (. svg) format
. svg fonts are a format that is based on SVG font rendering
[Chrome4+, safari3.1+, opera10.0+, IOS Mobile safari3.2+]
You need at least 2 fonts (. Woff,. EoT) in @font-face, and even need. svg and other font avenues more browser support
Reference website: http://www.w3cplus.com/content/css3-font-face
CSS3 text (2) (font)