@font-face该如何应用于Web页面

首先来看一个实例

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

如今很多浏览器都支持woff格式的字体，因此，可能你只需这样写代码

@font-face {
font-family: 'Font';
src: url('font.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('font.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

或者

@font-face {
font-family: 'Font';
src: url('font.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

如何在CSS中使用？

body {
font-family: 'Font';
}

网络字体(Web font)文件格式

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF
WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。

EOT
Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF
OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。