在 CSS3 之前，web 設計師必須使用已在用戶計算機上安裝好的字體。

通過 CSS3，web 設計師可以使用他們喜歡的任意字體。

當您您找到或購買到希望使用的字體時，可將該字體文件存放到 web 服務器上，它會在需要時被自動下載到用戶的計算機上。

您“自己的”的字體是在 CSS3 @font-face 規則中定義的。

瀏覽器支持

屬性瀏覽器支持

@font-face

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。

Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。

注釋：Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。

format格式

format 是一個可選參數，他的作用是提示該資源 URI 所引用的字體格式，關于字體格式，可以看下面列表：

format 格式Font 格式后綴名

truetype	TrueType	.ttf
opentype	OpenType	.ttf, .oft
truetype-aat	TrueType with Apple Advanced Typography extensions	.ttf
embedded-opentype	Embedded OpenType	.eot
svg	SVG Font	.svg, .svgz

這堆麻煩的字體格式的出現，是因為各種瀏覽器對他們的支持程度不一樣：

瀏覽器支持類型

IE6,7,8	僅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5	支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6	支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

使用您需要的字體

在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：

實例

<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */ }div { font-family:myFirstFont; } </style>

使用粗體字體

您必須為粗體文本添加另一個包含描述符的 @font-face：

實例

@font-face { font-family: myFirstFont; src: url('Sansation_Bold.ttf'),url('Sansation_Bold.eot'); /* IE9+ */ font-weight:bold; }

文件 "Sansation_Bold.ttf" 是另一個字體文件，它包含了 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	可選。定義如何拉伸字體。默認是 "normal"。
font-style	ormal italic oblique	可選。定義字體的樣式。默認是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可選。定義字體的粗細。默認是 "normal"。
unicode-range	unicode-range	可選。定義字體支持的 UNICODE 字符范圍。默認是 "U+0-10FFFF"。

優缺點

優點：圖標的顏色可以隨意修改，大小也是可以隨便控制的，不需要折騰圖片與文字的對齊問題，因為他本身就是文字，還可以使用陰影、文字漸變等 CSS3 的效果，總之就像操作一般字體一樣處理他們，該有的特點都有。

缺點：慢速網絡以及FQ代理下情況特別糟糕。外國很多網站的頁面都使用了網絡字體，而網絡字體下載是需要時間的，有些字體可能還比較大，在下載完畢之前，頁面有文字的地方都沒有渲染出來，體驗不好的情況需要等待三五秒中。不過這種情況還是可以優化的，先用一般字體頂替樣式，等下載完畢了再利用 JS 來重新渲染，不過這個代碼比較高，而且也不好判斷何時下載完成了。

?

參考文章

https://www.w3school.com.cn/css3/css3_font.asp?

http://www.w3.org/TR/css3-fonts/#the-font-face-rule?

http://www.w3help.org/zh-cn/causes/RF1001?

http://www.php100.com/manual/css3_0/@font-face.shtml?

https://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html

http://www.fontsquirrel.com/fontface/generator?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的HTML/CSS——@font-face 规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。