@font-face
- 版本：CSS3
语法：
取值：
- <identifier>：
- 字体名称
- <url>：
- 此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
- <string>：
- 此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype, opentype, embedded-opentype, svg等
- <font>：
- 定义字体相关样式
说明：
设置嵌入HTML文档的字体。
- 需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
- 嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
- .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
- 未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
-
示例：使用一个全浏览器兼容的自定义字体
代码如下：
@font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('woff'), /* chrome、firefox */ url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ } 你需要同时提供4种格式的字体
兼容性（同时支持.woff,.ttf,.otf,.svg格式的版本将被视为完全实现该属性）：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ |
| eot | 6.0+ | 2.0-38.0 | 4.0-43.0 | 3.1-8.1 | 5.0-28.0 | 3.2-8.1 | 2.1-4.4.4 | 18.0-40.0 |
| ttf/otf | 6.0-8.0 | 2.0-3.0 | 4.0+ | 3.1+ | 15.0+ | 3.2-4.1 | 2.1 | 18.0+ |
| 9.0+ | 3.5+ | 4.3+ | 2.2+ | |||||
| woff | 6.0-8.0 | 2.0-3.5 | 4.0 | 3.1-5.0 | 15.0+ | 3.2-4.3 | 2.1-4.3 | 18.0+ |
| 9.0+ | 3.6+ | 5.0+ | 5.1+ | 5.0+ | 4.4+ | |||
| svg | 6.0-11.0 | 2.0-38.0 | 4.0-37.0 | 3.1 | 15.0-24.0 | 3.2+ | 2.1-2.3 | 18.0-37.0 |
| 38.0-43.0 #1 | 3.2+ | 25.0-28.0 #1 | 3.0+ | 38.0-43.0 #1 |
- 策略修改为只支持windows vista/xp上的svg fonts