Font-face use

<style type="Text/css">@font-face{Font-family:'Aaargh'; Src:url (Fonts/AAARGH/AAARGH.TTF) Format ('TrueType'); Font-Weight:normal; Font-Style:normal;} @font-face{Font-family:'Ostrichsans-black'; Src:url (Fonts/THELEAGUEOF-OSTRICH-SANS-BAD8F030A420639C6066E53266647862D21D3501/OSTRICH-SANS-MASTER/OSTRICHSANS-BLACK.OTF) Format'OpenType'); Font-Weight:normal; Font-Style:normal;} p.new1{Font-family:'Aaargh';} P.new2{font-family:'Ostrichsans-black'; }</style>class="New1">hello,world!</p><pclass="New2">Hello,World!gsdfds</p></body>
When it comes to browser compatibility with @font-face, there is a problem with the font format, because different browsers are inconsistent with font formatting support, so it's important to understand what kind of fonts are supported by various versions of the browser, and how the fonts are easily brought to the front. Let me say this question separately, so that we have a concept in mind:
One, 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+ ";
Second, 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+ ";
Third, 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+ ";
Iv. 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+";
V. 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+".
This means that at least we need to be in the @font-face. Woff,.eot two format fonts, and even require. svg and other fonts to support more than one browsing version.
To enable @font-face to reach more browser support, Paul Irish wrote 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*/    
   @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 */    
Said so many empty theoretical knowledge, everyone must have a snack itch, then we first look at the W3cplus homepage in the navigation section of the blue font is how to achieve, if we have a DOM tag, we need to apply custom font:
Since the font format of each browser is inconsistent, it is necessary to convert a font into a variety of fonts, so that we can use the browser to set different font formats, the following
To provide you with a font generation tool: Fonts Quirrel.
Reference: http://blog.163.com/zx_1258/blog/static/133233799201301424414229/
40 free fonts that can be used by @font-face: Http://www.oschina.net/news/24166/free-fonts-fontface
Font-face use