CSS Web 字體
CSS @font-face 規則
Web 字體允許 Web 設計人員使用用戶計算機上未安裝的字體。
當您找到/購買了想要使用的字體后,只需將字體文件包含在您的 Web 服務器上,它將在需要時自動下載給用戶。
您的“自有”字體在 CSS @font-face
規則中進行定義。
不同的字體格式
TrueType 字體 (TTF)
TrueType 是 1980 年代后期由 Apple 和 Microsoft 開發的字體標準。 TrueType 是 Mac OS 和 Microsoft Windows 操作系統最常用的字體格式。
OpenType 字體 (OTF)
OpenType 是可縮放計算機字體的格式。它基于 TrueType 構建,并且是 Microsoft 的注冊商標。今天,OpenType 字體在主要計算機平臺上得到普遍使用。
Web 開放字體格式 (WOFF)
WOFF 是用于網頁的字體格式。它于 2009 年開發,現已成為 W3C 的推薦標準。 WOFF 本質上是具有壓縮和其他元數據的 OpenType 或 TrueType。目標是支持在有帶寬限制的網絡上從服務器到客戶端進行字體分發。
Web 開放字體格式 (WOFF 2.0)
TrueType/OpenType 字體比 WOFF 1.0 提供更好的壓縮。
SVG 字體/形狀
SVG 字體允許在顯示文本時將 SVG 用作字形。 SVG 1.1 規范定義了一個字體模塊,該模塊允許在 SVG 文檔中創建字體。您還可以將 CSS 應用于 SVG 文檔,同時 @font-face 規則可以應用于 SVG 文檔中的文本。
嵌入式 OpenType 字體 (EOT)
EOT 字體是 Microsoft 設計的 OpenType 字體的緊湊形式,用作網頁上的嵌入式字體。
對字體格式的瀏覽器支持
表格中的數字注明了完全支持該字體格式的首個瀏覽器版本。
字體格式 | |||||
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:該字體格式僅在設置為 "installable" 時有效。
*Firefox:默認情況下不支持,但可以啟用(需要將標志設置為 "true" 才能使用 WOFF2)。
使用您需要的字體
在 @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 descriptor):
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。定義字體名稱。 |
src | URL | 必需。定義字體文件的 URL。 |
font-stretch |
|
可選。定義應如何拉伸字體。默認值是 "normal"。 |
font-style |
|
可選。定義字體的樣式。默認值是 "normal"。 |
font-weight |
|
可選。定義字體的粗細。默認值是 "normal"。 |
unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認值是 "U+0-10FFFF"。 |