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

2014-08-31 CSS

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

 

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

給 Mr. 沙先生一點建議

彙整

分類

展開全部 | 收合全部

License

訂閱 Mr. 沙先生 的文章

輸入你的 email 用於訂閱