ATOZ CSS屏幕截圖：Unicode範圍和 @font-face

要點總結

• CSS 的 @font-face 規則允許在網頁設計中使用自定義字體，從而提升性能並改善排版效果。務必在不同的操作系統和瀏覽器上測試這些自定義字體，以確保其正確顯示。
• CSS 的 unicode-range 屬性可用於限制自定義字體應用的字符範圍。這對於直接在標記中添加特殊字符或符號，或對特定字符使用特殊字體特別有用。
• 通過使用 unicode-range 屬性，您可以通過確保僅下載和使用必要的字符來提高網頁性能，從而減少需要加載的數據量。但是，需要注意的是，並非所有瀏覽器都支持此屬性，因此應在 CSS 代碼中提供備用字體。

視頻講解（文字稿節選）

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

在現代瀏覽器（以及 IE4 及更高版本）中，我們可以添加自定義字體來增強網站的設計。

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

本節我們將學習：

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

@font-face

過去，網頁上的字體選擇僅限於少量“網絡安全”字體，例如：

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

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

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

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

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

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

<code class="language-css">@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');
}</code>

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

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

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

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

unicode-range

字體的每個字符都可以用其 Unicode 數字來描述，其形式為：

<code class="language-css">@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');
}</code>

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

<code>U+0041</code>

包括空格在內的每個字符都有唯一的 Unicode 數字。 UTF-8 字符集中還包含一系列特殊的字符，這對於直接在標記中添加形狀和符號非常有用。

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

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

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

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

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

首先，我們創建 @font-face 規則來加載單個字符字體。我將為其命名為“Ampersand”，並使用本地字體文件源以節省帶寬。

我將 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 文件中，我有一系列標題和段落，兩者都包含幾個＆符號。

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

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

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

<code class="language-css">@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}</code>

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

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

(後續的FAQ部分已省略，因為與偽原創目標不符，且篇幅過長。核心內容已在以上部分體現。)

以上是ATOZ CSS屏幕截圖：Unicode範圍和 @font-face的詳細內容。更多資訊請關注PHP中文網其他相關文章！