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在线生成工具直接生成这些代码，上传特殊字体文件，然后下载生成的包，里面就有现成的代码了