CSS3 @font-face——笔记

@font-face是CSS3的一个模块，用来把自定义的web字体嵌入网页中，IE4就开始支持。

@font-face的语法规则

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
}

1. YourWebFontName：自定义字体名称
2. source：字体存放路径
3. 字体格式，主要分truetype、opentype、truetype-aat、embedded-opentype、avg等，用来帮助浏览器识别
4. weight：粗体，style：斜体

format格式
1）TrueType（.ttf）格式：是最常见的字体，是一种RAW格式，不为网站优化，支持的浏览器有
IE9+，FireFox3.5+，Chrome4+，Safari3+，Opera10+，iOS Mobile Safari4.2+

2）OpenType（.otf）格式：被认为是一种原始的字体格式，其内置在TrueType的基础上，所以提供了更多功能，支持的浏览器有
FireFox3.5+，Chrome4+，Safari3.1+，Opera10+，iOS Mobile Safari4.2+

3）WebOpenFontFormat（.woff）格式：是web字体中的最佳格式，是一个开放的TrueType/OpenType的压缩版本，同时也支持数据包的分离，支持的浏览器有
IE9+，FireFox3.5+，Chrome6+，Safari3.6+，Opera11.1+

4）EmbeddedOpenType（.eot）格式：IE专用字体，支持的浏览器有
IE4+

5）SVG（.svg）格式：基于SVG字体渲染的一种格式，支持的浏览器有
Chrome4+，Safari3.1+，Opera10+，iOS Mobile Safari3.2+

意味着在@font-face中至少需要.woff，.eot两种字体才能得到更多浏览器支持

@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 */
}
h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
}

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