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