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/

ttc to ttf

http://www.fontconverter.org/

otf-to-ttf

https://cloudconvert.com/otf-to-ttf