CSS3 字體
CSS3 @font-face 規則
以前CSS3的版本,網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用CSS3,網頁設計師可以使用他/她喜歡的任何字體。
當你發現您要使用的字體文件時,只需簡單的將字體文件包含在網站中,它會自動下載給需要的用戶。
您所選擇的字體在新的CSS3版本有關於@font-face規則描述。
您"自己的"的字體是在CSS3 @font-face 規則中定義的。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
属性 | |||||
---|---|---|---|---|---|
@font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9+, Firefox, Chrome, Safari, 和Opera 支持WOFF (Web Open Font Format) 字體.
Firefox, Chrome, Safari, 和Opera 支持.ttf(True Type字體)和.otf(OpenType)字體字體類型)。
Chrome, Safari 和Opera 也支持SVG 字體/折疊.
Internet Explorer 同樣支持EOT (Embedded OpenType) 字體.
注意: Internet Explorer 8以及更早的版本不支持新的@font-face規則。
使用您需要的字體
在新的@font-face 規則中,您必須首先定義字體的名稱(比如myFirstFont),然後指向該字體文件。
提示: URL請使用小寫字母的字體,大寫字母在IE中會產生意外的結果 |
如需為HTML 元素使用字體,請通過font-family 屬性來引用字體的名稱(myFirstFont):
實例
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
嘗試一下»
使用粗體文本
您必須添加另一個包含粗體文字的@font-face規則:
該文件"Sansation_Bold.ttf"是另一種字體文件,包含Sansation字體的粗體字。
瀏覽器使用這一文本的字體系列"myFirstFont"時應該呈現為粗體。
這樣你就可以有許多相同的字體@font-face的規則。
CSS3 字體描述
下表列出了所有的字體描述和里面的@font-face規則定義:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。 規定字體的名稱。 |
src | URL | 必需。 定義字體文件的URL。 |
font-stretch |
| 可選。 定義如何拉伸字體。 默認是"normal"。 |
font-style |
| 可選。 定義字體的樣式。 默認是"normal"。 |
font-weight |
| 可選。 定義字體的粗細。 默認是"normal"。 |
unicode-range | unicode-range | 可選。 定義字體支持的UNICODE 字符範圍。 默認是"U+0-10FFFF"。 |