CSS3 font-face使用

飛駕出南林發表於2019-02-14
CSSS3

在 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規則的各描述屬性說明如下：

 

描述符 值 描述
font-family name 必需。規定字型的名稱。
src URL 必需。定義字型檔案的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可選。定義如何拉伸字型。預設是 “normal”。
font-style
  • ormal
  • italic
  • oblique
 可選。定義字型的樣式。預設是 “normal”。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可選。定義字型的粗細。預設是 “normal”。
unicode-range unicode-range 可選。定義字型支援的 UNICODE 字元範圍。預設是 “U+0-10FFFF”。

字型格式有太多選擇，不幸的是始終沒有一個能在所有的瀏覽器上通用。這意味著，你必須使用多種字型的方案來保持使用者跨平臺的一致性體驗。當前，在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的博文，這裡不再贅述。

相關文章