[CSS] 連結到字體檔案

無論是自行存放字體檔案,還是使用線上的字體服務,都必須讓 CSS 知道字體可被運用在網站上。要使用 @font-face 這個特性。

@font-face {
  font-family: WebFontName;
  src: url('WebFontName.otf');
}
  • font-family:是將於樣式表裡其地方參照字體所使用的名稱,比較簡單的做法,就是給它實際字體的相同名稱。
  • 如果 font-family 包含多個單字,就必須用單引號包起來(亦即’Web Font Name’)。
  • src:確認指向字體檔案的 URL 具有正確的路徑,指向網站上字體檔案所在的位置。

前述程式碼只包含一個字體檔案,但是通常會針對每個字體連結到多個檔案,因為不同的作業系統支援不同的字體檔案類型,因此,最後的程式碼,看起來會像是這樣:

@font-face {
  font-family: WebFontName;
  src: url('WebFontName.eot');
  src: url('WebFontName.eot?#iefix') format('embedded-opentype'), url('WebFontName.woff') format('woff'), url('WebFontName.ttf') format('truetype'), url('WebFontName.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

你以多種格式提供相同字體,瀏覽器會使用它所支援的任何一個。

對於哪些字體檔案類型被哪些瀏覽器所支援,請看這篇文章(@font-face File Types Browser Support)

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of