要點(diǎn)總結(jié)

• CSS 的 @font-face 規(guī)則允許在網(wǎng)頁(yè)設(shè)計(jì)中使用自定義字體，從而提升性能並改善排版效果。務(wù)必在不同的操作系統(tǒng)和瀏覽器上測(cè)試這些自定義字體，以確保其正確顯示。
• CSS 的 unicode-range 屬性可用於限制自定義字體應(yīng)用的字符範(fàn)圍。這對(duì)於直接在標(biāo)記中添加特殊字符或符號(hào)，或?qū)μ囟ㄗ址褂锰厥庾煮w特別有用。
• 通過(guò)使用 unicode-range 屬性，您可以通過(guò)確保僅下載和使用必要的字符來(lái)提高網(wǎng)頁(yè)性能，從而減少需要加載的數(shù)據(jù)量。但是，需要注意的是，並非所有瀏覽器都支持此屬性，因此應(yīng)在 CSS 代碼中提供備用字體。

視頻講解（文字稿節(jié)選）

上一節(jié)我們學(xué)習(xí)了各種文本樣式屬性。

在現(xiàn)代瀏覽器（以及 IE4 及更高版本）中，我們可以添加自定義字體來(lái)增強(qiáng)網(wǎng)站的設(shè)計(jì)。

我們可以利用這些自定義字體的各種功能來(lái)幫助提升性能並整體改善排版效果。

本節(jié)我們將學(xué)習(xí)：

• @font-face 規(guī)則詳解
• 如何使用字體堆棧和 unicode-range 控制排版

@font-face

過(guò)去，網(wǎng)頁(yè)上的字體選擇僅限於少量“網(wǎng)絡(luò)安全”字體，例如：

• Arial
• Comic Sans
• Courier New
• Georgia
• Impact
• Palatino
• Tahoma
• Times New Roman
• Trebuchet
• Verdana

其中一些字體非常優(yōu)秀，非常適合網(wǎng)頁(yè)使用——Georgia 作為襯線字體，Arial 或 Verdana 都是很棒的字體。 Comic Sans 當(dāng)然不是最好的……

但現(xiàn)在，我們可以使用各種自定義字體，並通過(guò)使用 @font-face 使其在所有瀏覽器上顯示。

雖然我們可以這樣做，但始終值得在一系列操作系統(tǒng)和瀏覽器上測(cè)試任何自定義字體，以確保它們看起來(lái)符合預(yù)期。

還要記住，字體文件的大小可能相當(dāng)大，因此請(qǐng)明智地使用它們以避免性能問(wèn)題。

@font-face 的語(yǔ)法如下所示：

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

字體使用 font-family 屬性命名，然後為不同的瀏覽器提供一系列不同的文件類型和格式。

為了避免用戶下載系統(tǒng)中已有的字體，可以指定要搜索的字體的本地名稱 local()。

為了為不同的瀏覽器創(chuàng)建所有正確的字體格式，我使用了一個(gè)名為 Font Squirrel 的很棒的在線資源。

他們有一個(gè)網(wǎng)絡(luò)字體生成器，它運(yùn)行得非常好。他們提供的下載還包含在 CSS 中添加這些自定義字體的所有代碼片段，這也很方便！

unicode-range

字體的每個(gè)字符都可以用其 Unicode 數(shù)字來(lái)描述，其形式為：

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

字符串“AtoZ CSS”可以用 Unicode 表示如下：

<code>U+0041</code>

包括空格在內(nèi)的每個(gè)字符都有唯一的 Unicode 數(shù)字。 UTF-8 字符集中還包含一系列特殊的字符，這對(duì)於直接在標(biāo)記中添加形狀和符號(hào)非常有用。

在使用 @font-face 添加自定義字體時(shí)，我們可以限制它們應(yīng)用的字符範(fàn)圍，這乍一看有點(diǎn)奇怪，但請(qǐng)耐心聽我解釋。

Baskerville 字體的斜體＆符號(hào)非常漂亮，許多設(shè)計(jì)師即使不使用 Baskerville 字體的其餘部分，也喜歡使用它。

只對(duì)＆符號(hào)使用這種特殊字體的一種方法是將其包裝在 <span> 標(biāo)籤中，並為其設(shè)置不同的 font-family。但這有點(diǎn)麻煩，並且完全可以在沒有任何額外標(biāo)記的情況下完成。

我們可以創(chuàng)建一個(gè)只包含此字符的字體，並將其作為列表中的第一個(gè)字體添加到我們的字體堆棧中。

當(dāng)瀏覽器遇到字體中不存在的字符時(shí)，它將向下掃描堆棧，直到找到包含所需字符的字體為止。我們可以利用這種行為在使用任何自定義或網(wǎng)絡(luò)安全字體時(shí)添加特殊的＆符號(hào)。

首先，我們創(chuàng)建 @font-face 規(guī)則來(lái)加載單個(gè)字符字體。我將為其命名為“Ampersand”，並使用本地字體文件源以節(jié)省帶寬。

我將 unicode-range 指定為 U 0026，用於單個(gè)＆符號(hào)字符?？梢灾付ㄕ麄€(gè)字符範(fàn)圍，正如屬性名稱所示，但在這種情況下只需要一個(gè)字符。

<code>A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053</code>

在這個(gè)示例 HTML 文件中，我有一系列標(biāo)題和段落，兩者都包含幾個(gè)＆符號(hào)。

我將創(chuàng)建兩個(gè)不同的字體堆棧，一個(gè)用於標(biāo)題，一個(gè)用於正文。在每種情況下，堆棧中的第一個(gè)字體都將是自定義的“Ampersand”字體。

對(duì)於標(biāo)題，我將添加 Museo 或 Rockwell 或襯線字體作為備用字體。

對(duì)於正文，我將添加 Avenir、Arial 或 sans-serif 作為備用字體。

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

就是這樣。當(dāng)瀏覽器呈現(xiàn)文本時(shí)，堆棧中的第一個(gè)字體僅包含一個(gè)＆符號(hào)字符，因此它將使用列表中的下一個(gè)字體（如果找到）來(lái)呈現(xiàn)其餘字符。

unicode-range 的瀏覽器支持良好。它在所有現(xiàn)代瀏覽器（Firefox 除外）以及 IE9 及更高版本中受支持。由於這純粹是視覺增強(qiáng)，因此瀏覽器支持對(duì)我來(lái)說(shuō)不是什麼大問(wèn)題——不支持的瀏覽器只會(huì)獲得可以成功加載的堆棧中的第一個(gè)字體。

(後續(xù)的FAQ部分已省略，因?yàn)榕c偽原創(chuàng)目標(biāo)不符，且篇幅過(guò)長(zhǎng)。核心內(nèi)容已在以上部分體現(xiàn)。)

以上是ATOZ CSS屏幕截圖：Unicode範(fàn)圍和 @font-face的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！