CSS3 @font-face 规则笔记

CSS3新特性——@font-face

@font-face 是CSS3中的新特性，主要是用于把自定义的Web字体嵌入到你的网页中。
@font-face 可以让前端工程师随心所欲的使用各种字体，字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
@font-face 不仅仅可以让我们的前端文字变得更加丰富，我们在前端页面中使用的很多图标也可以通过@font-face实现。

取值说明如下：

值	描述
YourWebFontName	自定义的字体名称，最好是使用你下载的默认字体，它将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”
source	自定义的字体的存放路径，可以是相对路径也可以是绝路径
format	自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
weight和style	这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

语法格式：

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

format格式

格式	说明
TrueType（.ttf）格式	是最常见的字体，是一种RAW格式，不为网站优化，支持的浏览器有IE9+，FireFox3.5+，Chrome4+，Safari3+，Opera10+，iOS Mobile Safari4.2+
OpenType（.otf）格式	被认为是一种原始的字体格式，其内置在TrueType的基础上，所以提供了更多功能，支持的浏览器有FireFox3.5+，Chrome4+，Safari3.1+，Opera10+，iOS Mobile Safari4.2+
WebOpenFontFormat（.woff）格式	是web字体中的最佳格式，是一个开放的TrueType/OpenType的压缩版本，同时也支持数据包的分离，支持的浏览器有IE9+，FireFox3.5+，Chrome6+，Safari3.6+，Opera11.1+
EmbeddedOpenType（.eot）格式	IE专用字体，支持的浏览器有IE4+
SVG（.svg）格式	基于SVG字体渲染的一种格式，支持的浏览器有Chrome4+，Safari3.1+，Opera10+，iOS Mobile Safari3.2+

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

例子

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

div{
font-family:myFirstFont;
}