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

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

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

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

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

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

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

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

@font-face

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

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

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

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

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

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

@font-face 的語法如下所示：

@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ù)字來描述，其形式為：

@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ī)則來加載單個(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è)字體（如果找到）來呈現(xiàn)其餘字符。

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

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

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