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>
字体格式转换推荐网站https://www.fontsquirrel.com/tools/webfont-generator