css自定义字体完美解决方案example

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>fontface</title>

     <style type="text/css">

         /*完美解决css3 web-safe字体各种浏览器兼容问题*/

         @font-face {

             font-family: 'myfont';/*定义字体名称*/

             src: url('font/abandone-webfont.eot');/*兼容eot*/

             src: url('font/abandone-webfont.eot?#iefix') format('embedded-opentype'),

             url('font/abandone-webfont.woff2') format('woff2'),

             url('font/abandone-webfont.woff') format('woff'),/*火狐支持woff,woff2,opentype字体*/

             url('font/abandone-webfont.ttf') format('truetype'),/*基于webkit内核支持truetype字体*/

             url('font/abandone-webfont.svg#abandoned_bitplaneregular') format('svg');

             font-weight: normal;

             font-style: normal;

             font-stretch:ultra-expanded;/*定义字体符合拉伸*/

         }

         #ff{font-family:myfont; font-size: 50px;}

     </style>

 </head>

 <body>

   <p id="ff">css3,font css test123456</p>

 </body>

 </html>

字体格式转换推荐网站https://www.fontsquirrel.com/tools/webfont-generator

巴特西

css自定义字体完美解决方案example

最新文章

热门文章