CSS3 @font-face 使用方法

@font-face是CSS3中的一个模块， 能够加载服务器端的字体文件，可以在网页中嵌入客户端没有安装的字体。微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

语法

@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}

取值说明： font-family：设置文本的字体名称。 font-style：设置文本样式。 font-variant：设置文本是否大小写。 font-weight：设置文本的粗细。 font-stretch：设置文本是否横向的拉伸变形。 font-size：设置文本字体大小。 src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。 

CSS3 @font-face定义的字体类型以及对应的提供给format()函数的参数字符串

字符串参数	字体格式	字体默认的扩展名
"truetype"	TrueType	.ttf
"opentype"	OpenType字体	.ttf, .otf
"truetype-aat"	带有Apple Advanced Typography扩展的TrueType字体	.ttf
"embedded-opentype"	嵌入式OpenType	.eot
"svg"	SVG字体	.svg, .svgz

由于不同浏览器支持的字体格式不一样，为了兼容不同浏览器，定义font-face的时候要引入不同格式的字体，关于字体格式的介绍和字体格式转换可以参考这里

• Internet Explorer 只支持 EOT
  
• Mozilla Firefox 支持 OTF 和 TTF
  
• Safari 和 Opera 支持 OTF, TTF 和 SVG
  
• Chrome 支持 TTF 和 SVG
  

为了更好的兼容性，一般采用以下写法：

@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Demo

定义特殊字体Kinescope，需要提前下载好字体文件

@font-face {
    font-family: 'KinescopeRegular'; 
    src: url('../font/kinescope-webfont.eot'); 
    src: url('../font/kinescope-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/kinescope-webfont.woff') format('woff'), 
         url('../font/kinescope-webfont.ttf') format('truetype'), 
         url('../font/kinescope-webfont.svg#KinescopeRegular') format('svg');
}

为h1使用这种Kinescope字体

h1 { font-family:'KinescopeRegular'; font-size:36px;}

还可以直接使用font-face在线生成工具直接生成这些代码，上传特殊字体文件，然后下载生成的包，里面就有现成的代码了