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转换。