CSS3 font-face使用

在 CSS3 之前，web 設計師必須使用已在用戶電腦上安裝好的字體。

通過 CSS3，web 設計師可以使用他們喜歡的任意字體。

當您找到或購買到希望使用的字體時，可將該字體文件存放到 web 伺服器上，它會在需要時被自動下載到用戶的電腦上。

您“自己的”的字體是在 CSS3 @font-face 規則中定義的。

@font-face的語法規則：

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

font-family定義字體的名稱，src用來指定字體文件地址，可以是相對地址或者絕對地址。@font-face規則的各描述屬性說明如下：

字體格式有太多選擇，不幸的是始終沒有一個能在所有的瀏覽器上通用。這意味著，你必須使用多種字體的方案來保持用戶跨平臺的一致性體驗。當前，在web上使用各種不同字體格式有：TTF、OTF、WOFF、EOT 和 SVG 。具體不同字體在各品牌瀏覽器的支持情況，這裡不一一介紹。

在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:

  @font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot') format('eot');/*IE*/
    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
  }

但為了讓各多的瀏覽器支持，你也可以寫成：

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

使用@font-face定義自己的WEB字體如下：

@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'),
  url('../fonts/iconfont.svg#iconfont') format('svg');
}

 題外話

如何獲取我們所需要的字體文件呢？其一，到付費網站購買字體；其二，到免費網站下載字體。當我們獲取到字體，如何得到同一字體的.eot,.woff,.ttf,.svg字體格式。這裡推薦一個網頁工具font squirrel，它能有效幫助我們生成不同字體格式文件。比如，我們手上已經有目標字體的ttf格式文件，上傳該ttf文件，font squirrel便能幫我們方便地生成其他字體格式文件。關於font squirrel的具體使用，請參考fjdingsd的博文，這裡不再贅述。