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