原文摘自：https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html
总节：
1） 定义字体标准格式：
1 @font-face { 2 font-family: 'YourWebFontName'; 3 src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ 4 src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ 6 url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ 7 url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ 8 9 [font-weight: <weight>]; 10 [font-style: <style>]; 11 }
YourWebFontName ： 字体名称
url('YourWebFontName.eot') 字体在服务器上的相对路径或绝对路径
要求尽可能的上传ttf、eot、woff、svg字体，并显示表明相应格式，比如： format('embedded-opentype')
还可以字体字体描述，比如是否是粗体： font-weight 等，但不是必须的。
2）字体转换网址：
https://www.fontke.com/tool/convfont/
3）演示代码：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <style> /* 定义 卡布奇诺美瞳简体 */ @font-face { font-family: "卡布奇诺美瞳简体"; src: url("锐字工房卡布奇诺美瞳简1.0.eot"); /* IE9 Compat Modes */ src: url("锐字工房卡布奇诺美瞳简1.0.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("锐字工房卡布奇诺美瞳简1.0.woff") format("woff"), /* Modern Browsers */ url("锐字工房卡布奇诺美瞳简1.0.ttf") format("truetype"), /* Safari, Android, iOS */ url("锐字工房卡布奇诺美瞳简1.0.svg#YourWebFontName") format("svg"); /* Legacy iOS */ } /* 应用字体 */ div { font-family: "卡布奇诺美瞳简体", "Arial Black", Gadget, sans-serif; font-size:40px; /* 字体太小，使其变大*/ font-weight:bold; color:#06C; } </style> </head> <body> <div class="tip">Hello World!</div> </body> </html>
演示网址：http://www.wangshen.net/learn/css3/demo/font-face/ ,第一次打开有点慢，因为中文字体库一般都比较大。
演示下载：http://www.wangshen.net/learn/css3/demo/font-face/font-face.rar