CSS @font-face - unicode-range

CSS 描述符unicode-range 用於 @font-face @規則，用於設定使用@font-face @規則從字型中使用的特定字元範圍，並且可以提供在當前頁面上使用。

當指定範圍內的任何字元未被當前頁面使用時，則不會下載該字型。即使使用單個字元，也會下載完整的字型。

此描述符的重要性在於，它允許字型資源被分割，以便使瀏覽器下載當前頁面使用的字型資源。例如，某個網站根據其本地化使用情況提供各種語言（字型資源）的內容，例如希臘語、法語、英語等。因此，訪問其中一種字型資源的使用者不需要其他字型資源，避免下載未使用的字型資源，從而節省頻寬。

可能的值

unicode-range CSS 描述符可以具有以下範圍值之一

單個程式碼點：指定單個 Unicode 字元程式碼點，例如U+26。
程式碼點範圍：指定 Unicode 程式碼點的範圍，例如U+0025-00FF，表示包含U+0025 和U+00FF 範圍內的所有字元。
萬用字元範圍：指定由萬用字元組成的 Unicode 程式碼點範圍，例如使用'?' 字元，例如U+4??，表示包含U+400 和U+4FF 範圍內的所有字元。

語法

unicode-range = #

以下是指定範圍的不同方法

/* Single code point */
unicode-range: U+26;

/* code point range */
unicode-range: U+0025-00FF;

/* wildcard range */
unicode-range: U+4??; 

/* multiple values in one declaration */
unicode-range: U+0025-00FF, U+4??;

CSS unicode-range - 單個字元字型更改

以下示例演示了@font-face @規則的unicode-range 描述符的使用，每個元素使用不同的字型。

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: local("Arial bold");
      unicode-range: U+26;
   }

   @font-face {
      font-family: "f2";
      src: local("Verdana");
      unicode-range: U+26;
   }

   span {   
      font-family: f1;
      color: green;
      font-size: 1.5em;
   }

   p {
      font-family: f2;
      color: red;
      font-size: 3.5em;
   }
</style>
</head>
<body>
   <p>Verdana <span>&</span> Verdana</p>
</body>
</html>

在上例中，<span> 中包含的 & 符號使用Arial 粗體 字型，<p> 元素使用verdana 字型。

列印頁面