要點總結(jié)

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

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

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

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

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

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

• @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 當然不是最好的……

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

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

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

@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)建所有正確的字體格式，我使用了一個名為 Font Squirrel 的很棒的在線資源。

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

unicode-range

字體的每個字符都可以用其 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)的每個字符都有唯一的 Unicode 數(shù)字。UTF-8 字符集中還包含一系列特殊的字符，這對于直接在標記中添加形狀和符號非常有用。

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

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

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

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

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

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

我將 unicode-range 指定為 U 0026，用于單個＆符號字符?？梢灾付ㄕ麄€字符范圍，正如屬性名稱所示，但在這種情況下只需要一個字符。

<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>

在這個示例 HTML 文件中，我有一系列標題和段落，兩者都包含幾個＆符號。

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

對于標題，我將添加 Museo 或 Rockwell 或襯線字體作為備用字體。

對于正文，我將添加 Avenir、Arial 或 sans-serif 作為備用字體。

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

就是這樣。當瀏覽器呈現(xiàn)文本時，堆棧中的第一個字體僅包含一個＆符號字符，因此它將使用列表中的下一個字體（如果找到）來呈現(xiàn)其余字符。

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

(后續(xù)的FAQ部分已省略，因為與偽原創(chuàng)目標不符，且篇幅過長。核心內(nèi)容已在以上部分體現(xiàn)。)

以上是ATOZ CSS屏幕截圖：Unicode范圍和 @font-face的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！