font-face 详解

@font-face 是 CSS3 的一个模块，其主要作用是可将自定义字体嵌入到网页中，让网页字体的运用不只是限定在 Web 安全字体中

更多精彩

• 更多技术博客，请移步 asing1elife's blog

语法

1. webFontName: 引入的自定义字体名称，将会为指定的元素添加 font-family: webFontName
2. source: 字体路径
3. format: 字体格式，用于帮助浏览器识别，truetype opentype truetype-aat embedded-opentype svg …
4. weight: 字体是否粗体
5. style: 字体样式

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

格式

1. truetype - ttf
   • Windows 和 Mac 最常见字体
   • RAW 格式，不为任何网站优化
   • IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+
2. opentype - otf
   • 原始字体格式，内置在 truetype 基础之上
   • 提供更多功能
   • Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+
3. web-open-font-format - woff
   • Web 字体最佳格式
   • 是一个开放的 truetype、opentype 压缩版本
   • 支持元数据包的分离
   • IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
4. embedded-opentype - eot
   • IE 专用字体
   • 可以从 truetype 创建此格式
   • IE4+
5. svg - svg
   • 基于 svg 渲染
   • Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

@font-face {
    font-family: 'webFontName';
    src: url('webFontName.eot'); /* IE9 Compat Modes */
    src: url('webFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webFontName.woff') format('woff'), /* Modern Browsers */
         url('webFontName.ttf') format('truetype'), /* Safari, Android, iOS */
         url('webFontName.svg#webFontName') format('svg'); /* Legacy iOS */
}

使用

1. 获取自定义字体的原始文件，可前往 DaFont 下载
2. 在 Font Squirrel 将字体转换为兼容各浏览器的 Web 字体
3. 按上述兼容性语法指定 @font-face 中的字体
4. 在指定元素中调用该自定义字体