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