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

最新推荐文章于 2024-04-22 14:21:48 发布

dhp30329

最新推荐文章于 2024-04-22 14:21:48 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/wujindong/p/5326368.html

版权

 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

转载于:https://www.cnblogs.com/wujindong/p/5326368.html

dhp30329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css自定义字体完美解决方案example

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fontface</title> 6 <style type="text/css"> 7 ...
复制链接

扫一扫