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
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
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/