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轉換。