Site icon Mr. 沙先生

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 位置可以使用 絕對路徑或是相對路徑來設定

Exit mobile version