CSS3的@ font-face規則

指定一個命名的字體"myFirstFont"並指定可以找到的網址：

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

更多"Try it Yourself"下面的例子。

定義和用法

隨著的@ font-face規則，網頁設計人員不再需要使用的一個"web-safe"的字體。

在新的@ font-face規則，你必須先定義的字體的名稱(eg myFirstFont)然後指向字體文件。

提示：使用小寫字母的字體URL。大寫字母可以出現意想不到的結果在IE瀏覽器！

使用的字體為HTML元素，指的是字體的名稱(myFirstFont)通過font-family屬性：

div {
font-family: myFirstFont;
}

該的@ font-face規則在Internet Explorer，Firefox，歌劇，鉻，和Safari是支持的。

在表中的數字指定完全支持的字體格式的第一個瀏覽器的版本。

* Edge和IE瀏覽器：當設置為字體格式只能"installable" 。

*火狐：默認情況下禁用，但可以啟用（需要設置一個標誌， "true"使用WOFF2）。

@font-face {
font-properties
}

字體描述符	值	描述
字體系列	name	需要。定義字體的名稱。
SRC	URL	需要。定義了URL(s) ，其中所述字體應從被下載
字體舒展	正常冷凝超濃縮超濃縮半濃縮擴大半發泡額外擴展超擴展	可選的。定義字體應如何拉伸。默認值是"normal"
字體樣式	正常斜體斜	可選的。定義字體應如何稱呼。默認值是"normal"
字體重量	正常膽大 100 200 300 400 500 600 700 800 900	可選的。定義字體的氣魄。默認值是"normal"
Unicode的範圍	unicode-range	可選的。定義的字體支持Unicode字符的範圍內。默認值是"U+0-10FFFF"

您必須添加包含粗體文字描述另一個的@ font-face規則：

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

文件"sansation_bold.woff"是另一種字體文件，包含用於Sansation字體的粗體字符。

瀏覽器將使用這個只要有一塊與FONT-FAMILY文本"myFirstFont"應該呈現為粗體。

這樣你可以有很多的@ font-face規則相同的字體。