CSS: How To Use @font-face

過去在開發網站時，字體的選擇一直都很保守，因為每個瀏覽器與作業系統對字型的支援很有限，幾乎就那幾種安全字型可以用。不過自從 CSS 多了 @font-face 這個指令後，事情開始有了些微的變化。@font-face 允許設計師在 CSS 指定特殊別的字型，瀏覽器會根據設定去下載這個字型來顯示，就像 background-image: url(‘link/to/image’); 一樣，瀏覽器會下載背景圖來顯示。

@font-face 的基本寫法如下：

@font-face {
    font-family: Graublau Sans Web;
    src: url(GraublauWeb.otf) format("opentype");
}

body {
    font-family: Graublau Sans Web, sans-serif;
}

支援 @font-face 指令的瀏覽器會以 Graublau Sans Web 來顯示，不支援的用預設的無親線字 (sans-serif) 顯示。

@font-face 還有一些實用的組合，例如可以指定粗細與斜體。

@font-face {
    font-family: Graublau Sans Web;
    src: url(GraublauWeb.otf) format("opentype"); /* format 可以不寫 */
    font-style: italic; /* 斜體 */
    font-weight: bold; /* 粗體 */
}

body {
    font-family: Graublau Sans Web, sans-serif;
}

src 也可以設定多組來源，有 url 與 local 兩種，local 就是讀取使用者本機端的字體，url 則是由網站提供字體。設定多組 src 的話，瀏覽器會試著從頭開始讀，直到找到成功讀取字型。因此將 local 設在 url 前面也可以省下使用者下載字型所需的時間。

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"),
       local("HelveticaNeue"),
       url(MgOpenModernaRegular.ttf);
}

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

body { font-family: MyHelvetica, sans-serif; }

以上這種寫法還兼顧了標準體與粗體。在使用 @font-face 的時候要注意字型的檔案大小，中文字的檔案動輒十多 MB，並不適合用在 @font-face，拼音文字的檔案相對小得多，這是中文、日文等象形文字先上的劣勢。另外不能跨站讀取，也就是不能偷用別人網站上的字型，字型檔必須與 html 同一來源。

當然字型授權的部份自己要注意，就不多提了。