CSS3之@font-face 自定义字体

标签（空格分隔）： 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