CSS筆記 在網站使用特殊字型－@font-face

在一般網站中使用的字型必須考慮使用者上是否擁有該字型，為了使設計者更加彈性

 

在網站中可以使用 @font-face 這個 CSS 來宣告字型檔的位置，讓使用者自動下載在你網站中使用的特殊字型

 

一般 @font-face 在最上層宣告，也可以在任何 CSS 條件群組中宣告。

 

@font-face 用法

@font-face{ 
   font-family: QingShu; 
   src: url(/font/QingShu.otf); 
 } 
  
  
 h1 { font-family: QingShu, serif; }

 

 

在上面 @font-face 中宣告了 QingShu 這個字型的位置在 font/QingShu.otf 告訴使用者去下載

 

並且在 h1 指定使用 QingShu 字型，若是遇到不支援 @font-face 則使用第二順位的 serif 一般字型來顯示。

 

而 src 的 url 位置可以使用 絕對路徑或是相對路徑來設定

---

Orignal From: CSS筆記　在網站使用特殊字型－@font-face