CSS3 Web字體-該@font-face規則
網絡字體允許Web設計人員使用未在用戶的計算機上安裝的字體。
當你已經找到/買了你希望使用的字體，只包括您的Web服務器上的字體文件，它會在需要時自動下載到用戶。
“自己的”字體的CSS3中定義@font-face的規則。
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
不同的字體格式
TrueType字體（TTF）
TrueType是在80年代末開發的字體標準，由蘋果和微軟。 TrueType是同時為Mac OS和微軟Windows操作系統中最常見的字體格式。
OpenType字體（OTF）
OpenType為可伸縮的計算機字體的格式。 它始建於TrueType ，並且是微軟的註冊商標。 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字體的緊湊形式OpenType由Microsoft用作網頁上嵌入字體設計的字體。
對於字體格式的瀏覽器支持
在表中的數字指定完全支持的字體格式的第一個瀏覽器的版本。
| 字體格式 | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4 | 3.5 | 3.1 | 10.0 |
| WOFF | 9 | 5 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 不支持 | 36.0 | 35.0 * | 不支持 | 26.0 |
| SVG | 不支持 | 4 | 不支持 | 3.2 | 9 |
| EOT | 6 | 不支持 | 不支持 | 不支持 | 不支持 |
* IE：當設置為“可安裝”的字體格式才有效。
*火狐：默認不支持，但可以啟用（需要設置一個標誌為“true”使用WOFF2）。
使用字體你想要的
在CSS3 @font-face的規則，你必須先定義的字體（如姓名myFirstFont ），然後指向字體文件。
 | 提示：一定要使用的字體URL小寫字母。 大寫字母，可以在IE出現意想不到的結果。 |
|---|
使用的字體為HTML元素，指的是字體的名稱（ myFirstFont通過） font-family屬性：
例
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
試一試» 使用粗體文字
您必須添加其他@font-face包含粗體文字描述的規則：
文件"sansation_bold.woff"是另一種字體文件，包含用於Sansation字體的粗體字符。
瀏覽器將使用這個只要有一塊與FONT-FAMILY“的文字myFirstFont ”應該呈現為粗體。
這樣你可以有很多@font-face的規則相同的字體。
自測練習用！
CSS3字體描述
下表列出了可以在裡面定義的所有字體描述@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 | 可選的。 定義字體應如何拉伸。 默認為“正常” |
| font-style | normal italic oblique | 可選的。 定義字體應如何稱呼。 默認為“正常” |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可選的。 定義字體的氣魄。 默認為“正常” |
| unicode-range | unicode-range | 可選的。 定義的字體支持Unicode字符的範圍內。 默認為“U + 0-10FFFF” |