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

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

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

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

瀏覽器支持

屬性瀏覽器支持

@font-face

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

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

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

format格式

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

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

這堆麻煩的字體格式的出現(xiàn)，是因?yàn)楦鞣N瀏覽器對他們的支持程度不一樣：

瀏覽器支持類型

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 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

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

實(shí)例

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

使用粗體字體

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

實(shí)例

@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" 的文本需要顯示為粗體，瀏覽器就會使用該字體。

通過這種方式，我們可以為相同的字體設(shè)置許多 @font-face 規(guī)則。

CSS3 字體描述符

下面的表格列出了能夠在 @font-face 規(guī)則中定義的所有字體描述符：

描述符值描述

font-family	name	必需。規(guī)定字體的名稱。
src	URL	必需。定義字體文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可選。定義如何拉伸字體。默認(rèn)是 "normal"。
font-style	ormal italic oblique	可選。定義字體的樣式。默認(rèn)是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可選。定義字體的粗細(xì)。默認(rèn)是 "normal"。
unicode-range	unicode-range	可選。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：圖標(biāo)的顏色可以隨意修改，大小也是可以隨便控制的，不需要折騰圖片與文字的對齊問題，因?yàn)樗旧砭褪俏淖?#xff0c;還可以使用陰影、文字漸變等 CSS3 的效果，總之就像操作一般字體一樣處理他們，該有的特點(diǎn)都有。

缺點(diǎn)：慢速網(wǎng)絡(luò)以及FQ代理下情況特別糟糕。外國很多網(wǎng)站的頁面都使用了網(wǎng)絡(luò)字體，而網(wǎng)絡(luò)字體下載是需要時間的，有些字體可能還比較大，在下載完畢之前，頁面有文字的地方都沒有渲染出來，體驗(yàn)不好的情況需要等待三五秒中。不過這種情況還是可以優(yōu)化的，先用一般字體頂替樣式，等下載完畢了再利用 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位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。