码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-03-27 19:24:07      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

 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

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

标签:

原文地址:http://www.cnblogs.com/wujindong/p/5326368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!