CSS3：@font-face规则

前言

过去，Web设计师为了保证网站能够正常显示，只能使用“Web安全字体”，即每台机器都预装的字体。但Web安全字体有时并不好看...

@font-face能够使得任何一台机器能够显示理想中的字体。

字体定义文件

这里我们只要知道有这些格式的字体文件即可，不用背下来。

• ttf：True Type Font，Windows里面一般都是这种格式的，【控制面板】->【字体】可以查看系统自带字体。
• otf：Open Type Font
• eot：Embeded Open Type， IE仅支持该字体。
• woff：Web Open Font Format。
• svg：基于SVG渲染的字体。

@font-face

定义字体

@font-face {

font-family: <name>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
}

• <name>：设置自定义字体的名称，使用字体时引用该名称即可。
• <source>：定义字体定义文件的路径。
• <format>：帮助浏览器识别字体格式。
• <weight>和<style>在CSS中已经介绍过。

使用字体

font-family: <name>;

@font-face 规则模板

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

Google Fonts

• 虽然CSS3支持自定义字体（将ttf等字体文件放在工程目录下，然后使用@font-face引入），但是目前我比较推荐的方法是使用Google Web Fonts 来使用额外的字体。
• Google Web Fonts 可以看做是一个字体数据库，他虽然内部也使用了@font-face 规则定义字体，但是用户不需要直接接触到 @font-face，只需要简单一步即可使用。
• 比如我们想使用 Open Sans 这个字体，则只需要：

  • 引入：

    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  • 使用：

    font-family: 'Open Sans', sans-serif;  

Dafont

• 主页：http://www.dafont.com/
• 一个字体库，如果要使用，则你需要下载该文件（ttf格式），并安装或使用@font-face引入。（但一般我们先使用 Font Sqluirrel 转换）

Font Squirrel

• 地址：http://www.fontsquirrel.com/tools/webfont-generator
• 字体格式转换工具，解释如下图：

• 特别注意：下载的rar包中的stylesheet.css里面就已经定义了你的@font-face规则，你可以不用自己写，直接复制黏贴到项目中去。
• 因此通常的流程：在Dafont.com中下载ttf文件，使用Font Squirrel转换。