CSS Web 字型
CSS @font-face 規則
Web 字型允許網頁設計師使用使用者計算機上未安裝的字型。
當您找到/購買了希望使用的字型後，只需將字型檔案放在您的 Web 伺服器上，它就會在需要時自動下載到使用者那裡。
您自己的字型是在 CSS @font-face 規則中定義的。
不同的字型格式
TrueType 字型 (TTF)
TrueType 是由 Apple 和 Microsoft 在 20 世紀 80 年代末開發的一種字型標準。TrueType 是 Mac OS 和 Microsoft Windows 作業系統最常見的字型格式。
OpenType 字型 (OTF)
OpenType 是一種可縮放計算機字型的格式。它基於 TrueType 構建，是 Microsoft 的註冊商標。OpenType 字型今天在主要的計算機平臺上普遍使用。
Web Open Font Format (WOFF)
WOFF 是一種用於網頁的字型格式。它於 2009 年開發，現已成為 W3C 推薦。WOFF 本質上是帶有壓縮和附加元資料的 OpenType 或 TrueType。其目標是在頻寬受限的網路上支援字型從伺服器到客戶端的傳輸。
Web Open Font Format (WOFF 2.0)
TrueType/OpenType 字型，比 WOFF 1.0 提供更好的壓縮效果。
SVG 字型/形狀
SVG 字型允許在顯示文字時使用 SVG 作為字形。SVG 1.1 規範定義了一個字型模組，允許在 SVG 文件中建立字型。您也可以將 CSS 應用於 SVG 文件，並且 @font-face 規則可以應用於 SVG 文件中的文字。
嵌入式 OpenType 字型 (EOT)
EOT 字型是 OpenType 字型的緊湊形式，由 Microsoft 設計，用於在網頁上嵌入字型。
瀏覽器對字型格式的支援
表中的數字表示完全支援該字型格式的第一個瀏覽器版本。
| 字型格式 | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | 不支援 | 不支援 | 不支援 | 3.2 | 不支援 |
| EOT | 6.0 | 不支援 | 不支援 | 不支援 | 不支援 |
*IE：字型格式僅在設定為“可安裝”時才有效。
使用您想要的字型
在 @font-face 規則中；首先為字型定義一個名稱（例如 myFirstFont），然後指向字型檔案。
提示： 字型 URL 始終使用小寫字母。大寫字母在 IE 中可能會產生意外結果。
要將字型用於 HTML 元素，請透過 font-family 屬性引用字型名稱（myFirstFont）
示例
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
自己動手試一試 »
使用粗體文字
您必須新增另一個包含粗體文字描述符的 @font-face 規則
示例
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
自己動手試一試 »
檔案 "sansation_bold.woff" 是另一個字型檔案，其中包含 Sansation 字型的粗體字元。
每當需要將字體系列為 "myFirstFont" 的文字呈現為粗體時，瀏覽器將使用此檔案。
這樣，您就可以為同一字型擁有多個 @font-face 規則。
CSS 字型描述符
下表列出了可以在 @font-face 規則中定義的所有字型描述符
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。定義字型的名稱 |
| src | URL | 必需。定義字型檔案的 URL |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可選。定義字型應如何拉伸。預設值為 "normal" |
| font-style | normal 斜體 傾斜 |
可選。定義字型的樣式。預設值為 "normal" |
| font-weight | normal 粗體 100 200 300 400 500 600 700 800 900 |
可選。定義字型的粗細。預設值為 "normal" |
| unicode-range | unicode-range | 可選。定義字型支援的 UNICODE 字元的範圍。預設值為 "U+0-10FFFF" |
