标签（空格分隔）： CSS3
@font-face的是一个CSS规则，允许在网站上使用特定的字体，即使她在访问者的计算机上没有安装。
1 语法
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix')format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
font-stretch: condensed;
font-style: oblique;
font-weight: bold;
}
font-family：指定自定义字体名称，在 css 中 font-family 属性中使用字体名称应用改字体。
url：指定字体文件路径，
format： 指定自定义字体的格式,可能值为 truetype,opentype,truetype-aat,embedded-opentype,svg
font-stretch：定义字体拉伸
font-weight：定义字体粗细
font-style： 定义字体样式，如斜体
2 网络字体(Web font)文件格式
目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。
2.1 WOFF
WOFF是 Web Open Font Format 几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。由于使用了压缩算法，WOFF字体通常比其它字体加载的要快些。所有的现代浏览器都开始支持这种字体格式。
2.2 EOT
Embedded Open Type(eot)格式是IE专用字体，这种格式只在IE6 ～ IE8 里使用。
2.3 SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。
2.4 TTF
TrueType Font 字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+
2.5 OTF
OpenType Font 字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】
3 浏览器支持
| 浏览器 | 支持类型 |
|---|---|
| IE6,7,8 | 仅支持 Embedded OpenType(.eot) 格式。 |
| Firefox 3.5 | 支持 TrueType、OpenType(.ttf, .otf) 格式。 |
| Firefox 3.6 | 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。 |
| Chrome,Safari,Opera | 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。 |
4 工具
1 获取免费英文字体 http://www.fontsquirrel.com
2 字体格式转换工具 http://www.fontsquirrel.com/tools/webfont-generator
3 中文字体 http://www.youziku.com
