unicode-range
unicode-range CSS 描述符設定了要使用的字元的特定範圍，這些字元來自使用 @font-face 規則定義並可在當前頁面上使用的字型。如果頁面不使用此範圍內的任何字元，則不會下載該字型；如果至少使用一個字元，則會下載整個字型。
語法
css
/* <unicode-range> values */
unicode-range: U+26; /* single code point */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* code point range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */
值
描述
此描述符的目的是允許字型資源分段，以便瀏覽器只需要下載特定頁面文字內容所需的字型資源。例如，一個擁有多種本地化的網站可以為英語、希臘語和日語提供單獨的字型資源。對於檢視頁面英文版的使用者，無需下載希臘語和日語字型的字型資源，從而節省頻寬。
正式定義
| 相關的 at-rule | @font-face |
|---|---|
| 初始值 | U+0-10FFFF |
| 計算值 | 同指定值 |
正式語法
unicode-range =
<unicode-range-token>#
示例
為單個字元使用不同的字型
在此示例中，我們建立了一個單獨的 <div> 元素，其中包含一個文字字串，其中包括一個我們想要用不同字型設定樣式的 & 符號。為了使其顯而易見，我們將對文字使用無襯線字型，Helvetica，對 & 符號使用襯線字型，Times New Roman。
在 CSS 中，我們實際上定義了一個完全獨立的 @font-face，其中只包含一個字元，這意味著只有這個字元會用這種字型設定樣式。我們也可以透過將 & 符號包裝在 <span> 中並僅對其應用不同的字型來實現這一點，但這會增加一個額外的元素和規則集。
HTML
html
<div>Me & You = Us</div>
CSS
css
@font-face {
font-family: "Ampersand";
src: local("Times New Roman");
unicode-range: U+26;
}
div {
font-size: 4em;
font-family: "Ampersand", "Helvetica", sans-serif;
}
結果
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # unicode-range-desc |
瀏覽器相容性
載入中…