1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>fontface</title>
6 <style type="text/css">
7
8 /*完美解决css3 web-safe字体各种浏览器兼容问题*/
9 @font-face {
10 font-family: 'myfont';/*定义字体名称*/
11 src: url('font/abandone-webfont.eot');/*兼容eot*/
12 src: url('font/abandone-webfont.eot?#iefix') format('embedded-opentype'),
13 url('font/abandone-webfont.woff2') format('woff2'),
14 url('font/abandone-webfont.woff') format('woff'),/*火狐支持woff,woff2,opentype字体*/
15 url('font/abandone-webfont.ttf') format('truetype'),/*基于webkit内核支持truetype字体*/
16 url('font/abandone-webfont.svg#abandoned_bitplaneregular') format('svg');
17 font-weight: normal;
18 font-style: normal;
19 font-stretch:ultra-expanded;/*定义字体符合拉伸*/
20 }
21 #ff{font-family:myfont; font-size: 50px;}
22 </style>
23 </head>
24 <body>
25 <p id="ff">css3,font css test123456</p>
26 </body>
27 </html>