【转】CSS3属性 @font-face 整理

原文: http://www.w3cplus.com/content/css3-font-face

出自： w3cplus.com

一、语法规则

1 @font-face {
2     font-family: <YourWebFontName>;
3     src: url(<source> [<format>][,<source> [<format>]]*);
4     [font-weight: <weight>];
5     [font-style: <style>];
6 }

　　1.取值说明：
　　YourWebFontName是你自定义的字体名称；
　　source是你自定义的字体存放的路径，可以使用相对路径也可以是使用绝对路径；
　　format是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

　　2.实例：

 1 　　/*定义*/
 2     @font-face
 3     {
 4     font-family: myFirstFont;
 5     src: url('Sansation_Light.ttf'),
 6          url('Sansation_Light.eot'); 
 7     }

1 　　/*使用*/
2     div{
3         font-family:myFirstFont;
4     }

二、浏览器支持

　　Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
　　Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
　　注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

三、format()格式

　　1.TureTpe(.ttf)格式：
　　　　.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此它不为网站优化；支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
　　2.OpenType(.otf)格式：
　　　　.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能；支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
　　3.Web Open Font Format(.woff)格式：
　　.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
　　4.Embedded Open Type(.eot)格式：
　　　　.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
　　5.SVG(.svg)格式：
　　　　.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

　　这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

四、实践

　　为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

1 @font-face {
2     font-family: 'YourWebFontName';
3     src: url('YourWebFontName.eot?') format('eot');/*IE*/
4     src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
5 }

　　为了让各多的浏览器支持，你也可以写成：

 1 @font-face {
 2     font-family: 'YourWebFontName';
 3     src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
 4     src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5          url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
 6          url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
 7          url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
 8     font-weight: normal;
 9     font-style: normal;
10 }

五、字体下载网址　　

　　http://www.dafont.com/
　　https://fonts.google.com/ (需翻墙使用)