css 自定义字体 Internet Explorer,Firefox,Opera,Safari

FROM: https://developer.mozilla.org/ja/CSS/@font-face

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

http://www.w3.org/TR/css3-fonts/

 

代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <meta name="Author" content="涂聚文" />
 7 <meta name="Keywords" content= "自定义字体 缔友计算机信息技术有限公司 捷为工作室 www.dupcit.com" />
 8 <meta name="Description" content="自定义字体 缔友计算机信息技术有限公司 捷为工作室" />
 9 <link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />
10 <link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />
11 
12 <title>Web Font Sample CSS 自定义字体</title>
13   <style type="text/css" media="screen, print">
14     @font-face {
15       font-family: "迷你繁篆书";
16       src: url("繁篆书.ttf") format("truetype");
17     }
18     
19     body { font-family: "迷你繁篆书", serif;
20      font-size:45px;
21      font-weight:bold;
22      background: #000 url(black.png);
23      color: #fff;
24 
25  }
26         p { font: 28px 迷你繁篆书; }
27     h1{font-family: 迷你繁篆书}
28 
29   </style>
30 </head>
31 <body>
32 <div style="margin-left:auto;margin-right:auto; margin:0px 0px 0px 0px; text-align:center;">
33   <p>人生是一种心境,</p><p>生活是一种艺术,</p><p>成功是一种心态,</p><p>幸福是一种感觉,</p><p>竞争是一种建构,</p><p>情感是一种整合,</p><p>学习是一种成长.</p><p> ---Geovin Du</p>
34 </div></body>
35 </html>
36 
37 

 中文字体格式*.EOT*.SVG*.WOFF难转换，有没有人知道的?

http://www.fontsquirrel.com/fonts/
http://typeface.neocracy.org/fonts.html
http://www.microsoft.com/typography/web/embedding/weft3/download.aspx  微软官方发布了一个WEFT工具，可以将TTF转化为EOF,只能英文字体 

 

代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4 <head>
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 7 <meta http-equiv="X-UA-Compatible" content="IE=8" />
 8 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 9 <meta name="Author" content="涂聚文" />
10 <meta name="Keywords" content= "自定义字体 缔友计算机信息技术有限公司 捷为工作室 www.dupcit.com" />
11 <meta name="Description" content="自定义字体 缔友计算机信息技术有限公司 捷为工作室" />
12 <link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />
13 <link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />
14 
15 <title>Web Font Sample CSS 自定义字体Internet Explorer,Firefox,Opera,Safari</title>
16 <style type='text/css' media='screen'>
17 
18 @font-face {
19     font-family: 'hakuyoxingshu7000Regular';
20     src: url('http://www.dupcit.com/font/7000.eot');
21     src: local('hakuyoxingshu7000 Regular'), 
22     local('hakuyoxingshu7000'),
23      url('http://www.dupcit.com/font/7000.ttf') format('truetype'), 
24      url('http://www.dupcit.com/font/7000.svg#hakuyoxingshu7000') format('svg');
25 }
26 div#poem,div#poem h3{
27      font-size:45px;
28      font-family:hakuyoxingshu7000Regular!important;
29      text-align:center;
30 }
31 div#poem p{height:30px;line-height:30px;}
32 
33 @font-face {
34     font-family: 'AquilineRegular';
35     src: url('http://www.dupcit.com/font/aquiline-webfont.eot');
36     src: local('http://www.dupcit.com/font/AquilineRegular'), url('http://www.dupcit.com/font/aquiline-webfont.woff') format('woff'), url('http://www.dupcit.com/font/aquiline-webfont.ttf') format('truetype'), url('http://www.dupcit.com/font/aquiline-webfont.svg#webfontG9rEeOrX') format('svg');
37     font-weight: normal;
38     font-style: normal;
39 }
40 h1{font-family: AquilineRegular;}
41 </style>
42 
43 </head>
44 
45 <body><div style="margin-left:auto;margin-right:auto; margin:0px 0px 0px 0px; text-align:center; background: #000 url(black.png); color:#ffffff;">
46 <div id="poem">
47 <h3>云为素食</h3>
48 <p>京城有同窗，相约素食阁。</p>
49 <p>听者犹未尽，言者语已多。</p>
50 <p>满座皆友朋，畅谈何民科。</p>
51 <p>禅中寄小语，慎言且柔和。</p>
52 </div>
53 <h1>---Geovin Du</h1>
54 </div>
55 </body>
56 
57 </html>
58 

 

 

效果浏览: http://www.dupcit.com/11.html  

 

 http://www.dupcit.com/webfont/mnfzszi.html 支持客戶端瀏覽器(PC,手機)

 

字体转换

ttf to web font

http://font-to-web.com/convert-for-web/

 

posted @ 2010-11-13 12:32  ®Geovin Du Dream Park™  阅读(1104)  评论(0)    收藏  举报