隨著前端開(kāi)發(fā)的不斷發(fā)展，CSS 的功能日益強(qiáng)大，其中 @規(guī)則扮演著舉足輕重的角色。它們不僅擴(kuò)展了 CSS 的功能邊界，還為開(kāi)發(fā)者提供了更加靈活和高效的樣式定義方式，讓我們來(lái)一同探索這些強(qiáng)大而實(shí)用的 @ 規(guī)則吧！

@font-face

@font-face 用于使用自定義字體。它的基本用法包括定義一個(gè)字體家族并為這個(gè)家族指定一個(gè)或多個(gè)字體源文件。字體家族是為字體取的名字，而字體源文件則是字體的實(shí)際文件，可以通過(guò) URL 指定。字體文件可以有多種格式，如 TrueType (.ttf)、OpenType (.otf)、Embedded OpenType (.eot)、SVG (.svg) 和 WOFF (.woff) 等。

例如，可以這樣使用 @font-face：

@font-face {  
  font-family: "MyCustomFont";  
  src: url("MyCustomFont.woff2") format("woff2"),  
       url("MyCustomFont.woff") format("woff");  
}

這里定義了一個(gè)名為 "MyCustomFont" 的字體家族，并指定了兩個(gè)字體源文件，一個(gè)是 WOFF 2 格式，另一個(gè)是 WOFF 格式。瀏覽器會(huì)首先嘗試加載 WOFF 2 格式的字體，如果不支持，則會(huì)嘗試加載 WOFF 格式的字體。

注意，雖然 @font-face 提供了很大的靈活性，但字體文件的體積可能非常大，而且需要額外的 HTTP 連接，這可能會(huì)降低網(wǎng)站頁(yè)面的加載速度。因此，在使用 @font-face 時(shí)，需要權(quán)衡其優(yōu)點(diǎn)和可能帶來(lái)的性能問(wèn)題。

@keyframes

@keyframes 是 CSS3 動(dòng)畫中的一個(gè)關(guān)鍵特性，它允許定義動(dòng)畫過(guò)程中一系列關(guān)鍵幀的狀態(tài)。通過(guò)這些關(guān)鍵幀，可以創(chuàng)建復(fù)雜的動(dòng)畫效果，指定動(dòng)畫在不同時(shí)間點(diǎn)的樣式。

@keyframes 規(guī)則由兩部分組成：名稱和一組 CSS 樣式規(guī)則。名稱是定義動(dòng)畫的名稱，而 CSS 樣式規(guī)則描述了動(dòng)畫在每個(gè)關(guān)鍵幀時(shí)的樣式。

下面是一個(gè)簡(jiǎn)單的例子，創(chuàng)建一個(gè)從紅色漸變到藍(lán)色的動(dòng)畫：

@keyframes color-change {  
  0% {  
    background-color: red;  
  }  
  50% {  
    background-color: yellow;  
  }  
  100% {  
    background-color: blue;  
  }  
}

其中，color-change 是動(dòng)畫的名稱。0%、50% 和 100% 是關(guān)鍵幀，分別表示動(dòng)畫的開(kāi)始、中間和結(jié)束狀態(tài)。在每個(gè)關(guān)鍵幀中，定義了背景顏色。

要應(yīng)用這個(gè)動(dòng)畫到一個(gè)元素上，需要使用 animation 屬性，如下所示：

div {  
  width: 100px;  
  height: 100px;  
  animation-name: color-change;  
  animation-duration: 4s;  
  animation-iteration-count: infinite;  
}

這里將 color-change 動(dòng)畫應(yīng)用到了一個(gè) div 元素上。animation-duration 屬性定義了動(dòng)畫的持續(xù)時(shí)間，animation-iteration-count 屬性定義了動(dòng)畫的迭代次數(shù)（infinite 表示無(wú)限次）。

這樣，div 元素的背景顏色就會(huì)從紅色漸變到藍(lán)色，然后再?gòu)乃{(lán)色漸變回紅色，如此循環(huán)往復(fù)。

@page

@page 是 CSS3 中的一個(gè)規(guī)則，用于指定打印文檔時(shí)的頁(yè)面樣式。與屏幕顯示的樣式不同，@page 規(guī)則允許控制打印頁(yè)面的布局和外觀，例如頁(yè)面大小、邊距、頁(yè)眉、頁(yè)腳等。

可以使用 @page 規(guī)則為整個(gè)文檔或特定頁(yè)面設(shè)置樣式。例如，可以指定頁(yè)面大小、頁(yè)邊距的大小和方向，甚至可以添加背景圖像或顏色。這對(duì)于創(chuàng)建適合打印的文檔非常有用，因?yàn)榇蛴≥敵鐾ǔＰ枰煌臉邮胶筒季謥?lái)適應(yīng)紙張的大小和方向。

下面是一個(gè)簡(jiǎn)單的例子，用于設(shè)置頁(yè)面的大小和邊距：

@page {  
  size: A4; /* 設(shè)置頁(yè)面大小為 A4 */  
  margin: 2cm; /* 設(shè)置頁(yè)邊距為 2 厘米 */  
}

還可以使用 @page 偽類選擇器來(lái)為文檔中的不同頁(yè)面指定不同的樣式。例如，為第一頁(yè)設(shè)置特殊的樣式：

@page :first {  
  @top-left {  
    content: "前端充電寶"; /* 在第一頁(yè)的左上角添加標(biāo)題 */  
  }  
  @bottom-right {  
    content: "頁(yè)碼 " counter(page); /* 在第一頁(yè)的右下角顯示頁(yè)碼 */  
  }  
}

注意，@page 規(guī)則僅適用于打印樣式表，并且不會(huì)影響屏幕顯示。這意味著當(dāng)創(chuàng)建一個(gè)樣式表時(shí)，可能需要包含兩個(gè)不同的部分：一個(gè)用于屏幕顯示（使用媒體查詢 @media screen），另一個(gè)用于打?。ㄊ褂妹襟w查詢 @media print）。

/* 屏幕顯示樣式 */  
@media screen {  
  /* ... */  
}  
  
/* 打印樣式 */  
@media print {  
  @page {  
    size: A4;  
    margin: 2cm;  
  }  
  /* ... */  
}

這樣，當(dāng)打印文檔時(shí)，瀏覽器會(huì)應(yīng)用打印樣式表，并使用 @page 規(guī)則來(lái)格式化頁(yè)面。

@media

@media 用于根據(jù)設(shè)備的媒體類型和特性應(yīng)用不同的樣式規(guī)則，也就是我們常說(shuō)的媒體查詢。它的基本語(yǔ)法如下：

@media mediatype and|not|only (media feature) { 
  /* ... */
}

其中mediatype是媒體類型，如screen、print等；media feature則定義了媒體的一些特性，如max-width、min-width等。

使用@media，可以針對(duì)不同的屏幕尺寸、設(shè)備類型等條件來(lái)應(yīng)用不同的樣式，以實(shí)現(xiàn)響應(yīng)式布局或適配不同設(shè)備的顯示效果。例如，可以設(shè)置當(dāng)屏幕寬度小于600px時(shí)應(yīng)用一套樣式，而當(dāng)屏幕寬度大于900px時(shí)應(yīng)用另一套樣式。

應(yīng)用場(chǎng)景：

• 響應(yīng)式布局：隨著移動(dòng)設(shè)備的普及，越來(lái)越多的網(wǎng)站需要能夠在不同大小的屏幕上都有良好的顯示效果。使用@media，可以根據(jù)屏幕的大小來(lái)調(diào)整布局、字體大小、圖片大小等，以實(shí)現(xiàn)響應(yīng)式布局。
• 適配不同設(shè)備：不同的設(shè)備可能有不同的顯示特性，如電視、投影儀等可能有較高的分辨率，而手機(jī)、平板等則可能屏幕較小。使用@media，可以針對(duì)這些設(shè)備的特性來(lái)應(yīng)用不同的樣式，以確保網(wǎng)站在這些設(shè)備上都能正常顯示。
• 打印樣式：在打印網(wǎng)頁(yè)時(shí)，可能希望使用與屏幕顯示不同的樣式，如去掉背景圖片、減小字體大小等。通過(guò)@media print，可以定義只在打印時(shí)應(yīng)用的樣式規(guī)則。

下面來(lái)看一個(gè)使用 @media 的例子：

/* 默認(rèn)樣式，適用于所有設(shè)備 */  
body {  
  background-color: lightgray;  
  font-size: 16px;  
}  
  
/* 當(dāng)屏幕寬度小于 600px 時(shí)應(yīng)用的樣式 */  
@media screen and (max-width: 599px) {  
  body {  
    background-color: pink;  
    font-size: 14px;  
  }  
}  
  
/* 當(dāng)屏幕寬度在 600px 到 900px 之間時(shí)應(yīng)用的樣式 */  
@media screen and (min-width: 600px) and (max-width: 900px) {  
  body {  
    background-color: lightblue;  
    font-size: 18px;  
  }  
}  
  
/* 當(dāng)屏幕寬度大于 900px 時(shí)應(yīng)用的樣式 */  
@media screen and (min-width: 901px) {  
  body {  
    background-color: lightgreen;  
    font-size: 20px;  
  }  
}

在這個(gè)例子中，定義了幾個(gè)不同的 @media 查詢，每個(gè)查詢針對(duì)不同的屏幕尺寸應(yīng)用不同的樣式。當(dāng)瀏覽器加載這個(gè) CSS 文件時(shí)，它會(huì)根據(jù)當(dāng)前設(shè)備的屏幕尺寸來(lái)確定應(yīng)用哪個(gè)樣式規(guī)則。

@layer

@layer 聲明了一個(gè)級(jí)聯(lián)層，同一層內(nèi)的規(guī)則將級(jí)聯(lián)在一起，這給予了開(kāi)發(fā)者對(duì)層疊機(jī)制的更多控制。

@layer default, theme, state;

@layer default {
  button {
    background: rebeccapurple;
    color: white;
  }    
}

@layer state {
  :disabled {
    background: dimgray;
  }    
}

@layer theme {
  button.danger {
    background: maroon;
  }

  button.info {
    background: darkslateblue;
  }

  #call-to-action {
    background: mediumvioletred;
  }
}

上面例子中定義了多個(gè)級(jí)聯(lián)層，當(dāng)一個(gè)聲明中具有多個(gè)級(jí)聯(lián)層時(shí)，后定義的級(jí)聯(lián)層具有更高的優(yōu)先級(jí)。因此上面例子中，state 層具有更高的優(yōu)先級(jí)，即使 theme 樣式中具有更高的特定性（權(quán)重）并且在代碼中出現(xiàn)得更晚。

還可以嵌套圖層：

@layer reset, framework, components, utilities;

@layer components {
  @layer default, theme, state;

  @layer state {
    /* components.state 層 */
    :disabled { background: dimgray; }    
  }
}

@layer components.state {
  /* components.state 層 */
  :focus-visible { outline: thin dashed hotpink; }
}

層按照每個(gè)層名稱首次出現(xiàn)在代碼庫(kù)中的順序堆疊，后面的層名稱優(yōu)先于前面的層。這意味著可以允許它們隱式堆疊：

@layer low { /* 最低層 */ }
@layer medium { /* 中間層 */ }
@layer high { /* 最高層 */ }

或者可以像上面例子一樣，按順序引入層名稱來(lái)明確定義層順序：

@layer low, medium, high;

@scope

@scope 規(guī)則允許明確地定義樣式的作用范圍，分為兩個(gè)部分。首先，通過(guò)選擇特定的根元素來(lái)定義范圍的邊界。

@scope (.block) { /* 這里的樣式僅適用于 .block 及其子元素 */  
  /* 樣式 */  
}

在這個(gè)范圍內(nèi)，可以定義僅適用于該范圍的子選擇器，確保樣式不會(huì)泄漏到范圍外部：

@scope (.block) {  
  .element { /* 這里的樣式僅適用于 .block 內(nèi)的 .element 元素 */  
    /* 樣式 */  
  }  
}

這與 CSS 嵌套的概念相似，但 @scope 提供了更明確的范圍定義。在嵌套中，每個(gè)嵌套選擇器前都可以有一個(gè)隱式的 &，代表父選擇器。但在 @scope 中，不需要使用 &，因?yàn)榉秶呀?jīng)通過(guò) .block 明確定義了。 舉個(gè)例子，下面的嵌套 CSS 代碼：

.block {  
  &.active { /* 這里的 & 代表 .block，所以選擇的是 .block.active */  
    color: red;  
  }  
    
  .element { /* 選擇的是 .block .element */  
    background-color: yellow;  
  }  
}

使用 @scope 可以更簡(jiǎn)潔地寫成：

@scope (.block) {  
  &.active {  
    color: red;  
  }  
    
  .element {  
    background-color: yellow;  
  }  
}

@scope 提供了一種更明確、更簡(jiǎn)潔的方式來(lái)定義和限制 CSS 規(guī)則的作用范圍，從而減少了全局樣式?jīng)_突的可能性，并提高了代碼的可維護(hù)性。

@container

@container 允許開(kāi)發(fā)者根據(jù)容器（而非視口或屏幕）的尺寸變化來(lái)設(shè)置內(nèi)部元素的樣式。這種機(jī)制被稱為“容器查詢”，它使得開(kāi)發(fā)者能夠更精細(xì)地控制頁(yè)面布局，特別是當(dāng)頁(yè)面內(nèi)部元素的尺寸變化時(shí)。

基本用法：

• 首先，需要定義一個(gè)容器元素，例如<div>，并為其指定一個(gè)唯一的名稱或標(biāo)識(shí)符。
• 然后，使用@container規(guī)則來(lái)定義當(dāng)容器尺寸變化時(shí)應(yīng)該如何調(diào)整內(nèi)部元素的樣式。

假設(shè)有一個(gè)名為.container的<div>元素，它內(nèi)部有一個(gè)<p>元素。當(dāng).container的寬度小于800px時(shí)，改變<p>元素的字體顏色?？梢赃@樣實(shí)現(xiàn)：

.container {  
  container-name: myContainer; /* 為容器指定名稱 */  
}  
  
@container myContainer (max-width: 800px) {  
  p {  
    color: gray; /* 當(dāng)容器寬度小于800px時(shí)，<p>元素的字體顏色變?yōu)榛疑?*/  
  }  
}

@starting-style

@starting-style 用于在元素首次應(yīng)用樣式或顯示類型從 "none" 更改為其他類型時(shí)啟動(dòng) CSS 過(guò)渡效果。這個(gè)規(guī)則使得開(kāi)發(fā)者能夠創(chuàng)建更平滑的動(dòng)畫效果，尤其是在元素從隱藏變?yōu)榭梢?jiàn)時(shí)。

@starting-style 的基本語(yǔ)法如下：

@starting-style {  
  /* 初始樣式 */  
}  
  
/* 常規(guī)樣式 */

當(dāng)元素首次應(yīng)用樣式時(shí)，它將從 @starting-style 定義的初始樣式開(kāi)始過(guò)渡，到達(dá)在常規(guī)樣式定義中指定的樣式。

假設(shè)有一個(gè) div 元素，希望在頁(yè)面加載時(shí)它從透明變?yōu)椴煌该?，同時(shí)背景顏色從綠色過(guò)渡到橙色?？梢赃@樣使用 @starting-style：

div {  
  transition: opacity 0.5s, background-color 0.5s;  
  opacity: 1;  
  background-color: lime;  
}  
  
@starting-style {  
  div {  
    opacity: 0;  
    background-color: green;  
  }  
}

在這個(gè)例子中，當(dāng) div 元素首次渲染時(shí)，它會(huì)從 opacity 為 0 和背景顏色為綠色的狀態(tài)開(kāi)始，然后過(guò)渡到 opacity 為 1 和背景顏色為橙色的狀態(tài)。

@property

@property是CSS Houdini API的一部分。這個(gè)規(guī)則允許開(kāi)發(fā)者顯式地定義CSS自定義屬性，并進(jìn)行屬性類型檢查、設(shè)定默認(rèn)值以及定義該自定義屬性是否可以被繼承。通過(guò) @property，可以直接在樣式表中注冊(cè)自定義屬性，無(wú)需運(yùn)行任何JavaScript代碼；同時(shí)，它也配備了相應(yīng)的JavaScript語(yǔ)法來(lái)注冊(cè)自定義屬性。

@property自定義屬性可以看作是 CSS 變量聲明變量的升級(jí)版本，它提供了更加規(guī)范和嚴(yán)謹(jǐn)?shù)姆绞絹?lái)定義和使用自定義屬性。在CSS中使用自定義屬性，可以使樣式更加靈活和可維護(hù)，同時(shí)也能夠減少重復(fù)的代碼。

在定義一個(gè)@property時(shí)，需要指定自定義屬性的名稱、語(yǔ)法結(jié)構(gòu)、初始值以及是否允許繼承等參數(shù)。例如，可以使用以下語(yǔ)法來(lái)定義一個(gè)名為--my-color的自定義屬性：

@property --my-color {  
  syntax: '<color>';  
  inherits: false;  
  initial-value: red;  
}

這里，--my-color是一個(gè)自定義屬性名稱，syntax指定了該屬性的語(yǔ)法結(jié)構(gòu)為顏色值，inherits指定了該屬性不被繼承，initial-value指定了該屬性的初始值為紅色。定義了這個(gè)自定義屬性之后，就可以在CSS中使用它了：

.element {  
  --my-color: blue;  
  background-color: var(--my-color);  
}

在這個(gè)例子中，.my-element的背景顏色被設(shè)置為藍(lán)色，這是通過(guò)自定義屬性--my-color來(lái)實(shí)現(xiàn)的。同時(shí)，也可以使用JavaScript來(lái)動(dòng)態(tài)地改變這個(gè)自定義屬性的值，從而改變?cè)氐臉邮健?/p>

@charset

@charset 用于定義樣式表中使用的字符編碼。這個(gè)規(guī)則必須寫在樣式表的最開(kāi)頭，并且前面不可有別的字符，包括注釋。在@charset之后，需要指定字符編碼的名稱，例如：

@charset 'UTF-8';

這個(gè)規(guī)則的主要為了在 CSS 文件中明確指定字符編碼，以確保樣式表能夠正確解析和顯示。當(dāng)CSS文檔沒(méi)有聲明字符編碼時(shí)，將使用HTML文檔聲明的字符編碼。如果兩者都沒(méi)有聲明，那么默認(rèn)會(huì)使用“UTF-8”編碼。

@import

@import 用于從其他樣式表中導(dǎo)入樣式規(guī)則。這意味著可以將一個(gè)大的樣式表拆分成多個(gè)較小的文件，并使用@import規(guī)則將它們組合在一起。這有助于更好地組織和管理樣式表，特別是當(dāng)項(xiàng)目變得龐大且復(fù)雜時(shí)。

@import規(guī)則的基本語(yǔ)法：

@import url('path/to/styles.css');

其中'path/to/styles.css'是要導(dǎo)入的外部樣式表的路徑。

還可以使用媒體查詢與@import結(jié)合，以便在不同條件下導(dǎo)入不同的樣式表。例如：

@import url('mobile.css') screen and (max-width: 768px);。

然而，需要注意的是，雖然@import提供了拆分和組織樣式表的便利，但過(guò)度使用它可能會(huì)導(dǎo)致性能問(wèn)題。因?yàn)槊總€(gè)@import都會(huì)觸發(fā)一個(gè)新的HTTP請(qǐng)求，這可能會(huì)增加頁(yè)面加載時(shí)間。因此，在實(shí)際項(xiàng)目中，建議謹(jǐn)慎使用@import，并考慮使用其他技術(shù)（如CSS預(yù)處理器）來(lái)更好地管理和組織樣式表。

另外，關(guān)于@import的使用還有一些限制和注意事項(xiàng)：

• @import規(guī)則必須位于樣式表的頂部，位于所有其他規(guī)則之前（除了@charset規(guī)則之外）。
• @import不是一個(gè)嵌套語(yǔ)句，這意味著不能在條件組的規(guī)則或媒體查詢內(nèi)部使用@import。

@namespace

@namespace 用于定義XML命名空間。它可以把通配、元素和屬性選擇器限制在指定命名空間里的元素。這在處理包含多個(gè)命名空間的文檔時(shí)非常有用，例如HTML5中的內(nèi)聯(lián) SVG、MathML 或者混合多個(gè)詞匯表的 XML。

@namespace規(guī)則也可以用來(lái)定義默認(rèn)命名空間。當(dāng)定義過(guò)默認(rèn)命名空間后，所有的通配選擇器和類型選擇器（但不包括屬性選擇器）都只應(yīng)用在這個(gè)命名空間的元素中。此外，@namespace規(guī)則還可以用于定義命名空間前綴，當(dāng)一個(gè)通配、類型、屬性選擇器前面有命名空間前綴修飾時(shí)，這個(gè)選擇器將只匹配那些命名空間與元素名或?qū)傩云ヅ涞脑亍?/p>

下面來(lái)在 CSS 中使用 @namespace 來(lái)為 SVG 元素定義樣式：

<!DOCTYPE html>  
<html>  
  <head>  
    <style>  
      /* 定義 SVG 命名空間 */  
      @namespace svg url(http://www.w3.org/2000/svg);  

      /* 為 SVG 命名空間中的元素定義樣式 */  
      svg|circle {  
        fill: blue;  
        stroke: pink;  
        stroke-width: 5;  
      }  
    </style>  
  </head>  
  <body>  

    <svg width="100" height="100">  
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
    </svg>  

  </body>  
</html>

在這個(gè)例子中，首先使用 @namespace 聲明了 SVG 的命名空間 URL。然后，使用命名空間前綴 svg| 來(lái)指定想要選擇的是 SVG 命名空間中的 circle 元素。這樣，fill、stroke 和 stroke-width 的樣式就只會(huì)應(yīng)用到 SVG 命名空間中的 circle 元素，而不是 HTML 中的其他元素。

注意，在實(shí)際開(kāi)發(fā)中，由于 HTML5 允許 SVG 直接嵌入而不需要顯式地聲明命名空間，因此在大多數(shù)情況下可能不需要使用 @namespace。

@supports

@supports 是 CSS3 引入的一個(gè)特性查詢規(guī)則，用于檢查瀏覽器是否支持某個(gè) CSS 屬性或?qū)傩灾?，然后根?jù)檢查結(jié)果應(yīng)用不同的樣式規(guī)則。如果瀏覽器支持指定的屬性或?qū)傩灾担敲淳蜁?huì)應(yīng)用相應(yīng)的樣式；如果不支持，則不會(huì)應(yīng)用。

@supports 的基本語(yǔ)法如下：

@supports (property: value) {  
  /* 如果瀏覽器支持 property: value，則應(yīng)用這些樣式 */  
}

下面是一個(gè)使用 @supports 的例子，檢查瀏覽器是否支持 display: grid 屬性，并據(jù)此應(yīng)用不同的布局樣式：

.container {  
  display: block; /* 默認(rèn)布局 */  
}  
  
@supports (display: grid) {  
  .container {  
    display: grid;  
    grid-template-columns: 1fr 1fr; /* 如果支持 grid，則應(yīng)用網(wǎng)格布局 */  
  }  
}

這里，如果瀏覽器支持 display: grid，.container 類將使用網(wǎng)格布局；否則，它將使用默認(rèn)的塊級(jí)布局。

@supports 的主要應(yīng)用場(chǎng)景是漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)。通過(guò) @supports，可以編寫更靈活的 CSS，確保在不支持某些新特性的舊瀏覽器中仍然有可接受的樣式表現(xiàn)，而在支持這些特性的新瀏覽器中則能享受更先進(jìn)的布局和功能。

@supports 還支持使用邏輯操作符 and、or 和 not 來(lái)組合多個(gè)條件，這使得特性查詢更加靈活。

@supports (display: flex) or (display: -webkit-flex) {  
  /* 如果瀏覽器支持 flex 或 -webkit-flex，則應(yīng)用這些樣式 */  
}

在這個(gè)例子中，@supports 查詢會(huì)檢查瀏覽器是否支持標(biāo)準(zhǔn)的 display: flex 或者 WebKit 前綴的 display: -webkit-flex，如果滿足其中一個(gè)條件，就會(huì)應(yīng)用內(nèi)部的樣式規(guī)則。

@counter-style

@counter-style 允許定義如何將計(jì)數(shù)器的整數(shù)值轉(zhuǎn)化為字符串表示，從而自定義計(jì)數(shù)器的樣式。這個(gè)規(guī)則非常靈活，可以指定計(jì)數(shù)系統(tǒng)的類型、使用的符號(hào)、前綴、后綴等。

@counter-style 的基本語(yǔ)法如下：

@counter-style <counter-style-name> {  
  system: <countersystem>;  
  symbols: <countersymbols>;  
  /* 其他描述符，如 prefix, suffix, range, pad, speak-as, fallback 等 */  
}

其中 <counter-style-name> 是自定義計(jì)數(shù)器樣式的名稱，<countersystem> 指定了計(jì)數(shù)系統(tǒng)（如循環(huán)、數(shù)值、字母等），<countersymbols> 定義了一組用于表示計(jì)數(shù)器值的符號(hào)。

假設(shè)想要?jiǎng)?chuàng)建一個(gè)名為 "thumbs" 的計(jì)數(shù)器樣式，該樣式使用 Unicode 字符 "??" 和 "??" 作為計(jì)數(shù)符號(hào)，并且每?jī)蓚€(gè)計(jì)數(shù)值循環(huán)一次。可以這樣定義：

@counter-style thumbs {  
  system: cyclic;  
  symbols: "??" "??";  
  suffix: " ";  
}  
  
/* 使用自定義的計(jì)數(shù)器樣式 */  
ol.thumbs-list {  
  list-style: thumbs;  
}

這里創(chuàng)建了一個(gè)名為 "thumbs" 的計(jì)數(shù)器樣式，它使用循環(huán)計(jì)數(shù)系統(tǒng)（system: cyclic），并且定義了兩個(gè)符號(hào)（"??" 和 "??"）。然后，將這個(gè)樣式應(yīng)用到了一個(gè)有序列表（ol.thumbs-list）上，這樣列表項(xiàng)就會(huì)使用我們定義的 "thumbs" 樣式來(lái)顯示計(jì)數(shù)器。

@font-palette-values

@font-palette-values 用于定義指定字體的配色方案。這個(gè)規(guī)則允許開(kāi)發(fā)者不僅可以選擇字體內(nèi)置的各種配色方案，還可以自定義配色方案。通過(guò) @font-palette-values 規(guī)則，開(kāi)發(fā)者可以為特定的字體指定一組顏色，并在 CSS 中使用這些顏色來(lái)為網(wǎng)頁(yè)元素提供一致的配色。

基本語(yǔ)法如下：

@font-palette-values <font-family> {  
  <palette-name> {  
    <color-stop> <percentage>;  
    <color-stop> <percentage>;  
    /* ... */  
  }  
  /* 可以定義多個(gè)配色方案 */  
}

其中 <font-family> 是指定的字體家族名稱，<palette-name> 是自定義的配色方案名稱，<color-stop> 是顏色值，<percentage> 是該顏色在配色方案中的位置（百分比）。

例如，假設(shè)有一個(gè)名為 "MyCustomFont" 的字體，并想為它定義一個(gè)名為 "MyPalette" 的配色方案：

@font-palette-values MyCustomFont {  
  MyPalette {  
    red 0%;  
    orange 50%;  
    yellow 100%;  
  }  
}

這里定義了一個(gè)從紅色漸變到橙色，再到黃色的配色方案。然后，在 CSS 中，可以使用這個(gè)配色方案來(lái)為網(wǎng)頁(yè)元素設(shè)置顏色：

h1 {  
  font-family: MyCustomFont;  
  font-palette: MyPalette;  
}

注意，@font-palette-values 的支持和可用性可能取決于瀏覽器和字體文件本身，并非所有字體都支持自定義配色方案。

@font-feature-values

@font-feature-values 用于定義字體特性的替代值。這個(gè)規(guī)則允許開(kāi)發(fā)者為特定的字體家族定義命名的特性值，然后在 font-variant-alternates 屬性中使用這些命名值來(lái)應(yīng)用字體特性，從而簡(jiǎn)化 CSS 的編寫。

這個(gè)規(guī)則的基本語(yǔ)法如下：

@font-feature-values <font-family-name> {  
  <feature-name> {  
    <feature-value-name>: <feature-value-index>;  
    /* ... */  
  }  
  /* 可以定義多個(gè)特性及其值 */  
}

其中 <font-family-name> 是想要應(yīng)用特性值的字體家族名稱，<feature-name> 是字體特性（如 swash、styleset 等），<feature-value-name> 是為特性定義的名稱，而 <feature-value-index> 是該特性值在字體中的索引。

舉個(gè)例子，假設(shè)有一個(gè)名為 "FancyFont" 的字體，它支持 "swash" 特性，該特性有三個(gè)不同的樣式?？梢允褂?nbsp;@font-feature-values 來(lái)定義這些樣式的命名值：

@font-feature-values FancyFont {  
  swash {  
    fancy-style: 1;  
    more-fancy-style: 2;  
    wild-style: 3;  
  }  
}

然后，在 CSS 中，可以使用這些命名值來(lái)應(yīng)用 "swash" 特性的不同樣式：

p {  
  font-family: FancyFont;  
  font-variant-alternates: swash(fancy-style);  
}  
  
h1 {  
  font-family: FancyFont;  
  font-variant-alternates: swash(more-fancy-style);  
}

這樣，<p> 元素將使用 "fancy-style" 的 swash 特性，而 <h1> 元素將使用 "more-fancy-style" 的 swash 特性。