試一試
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
當給定字型包含多種不同大小的大寫字母字形時，此屬性會選擇最合適的字形。如果袖珍大寫字母字形不可用，它們將使用小型大寫字母字形渲染。如果這些也不存在，瀏覽器會從大寫字母字形合成它們。
字型有時會為各種無大小寫區分的字元（例如標點符號）包含特殊字形，以更好地匹配其周圍的大寫字元。但是，小型大寫字母字形絕不會為無大小寫區分的字符合成。
特定語言規則
此屬性會考慮特定語言的大小寫對映規則。例如
- 在突厥語系語言中，如土耳其語 (tr)、亞塞拜然語 (az)、克里米亞韃靼語 (crh)、伏爾加韃靼語 (tt) 和巴什基爾語 (ba)，有兩種
i（一種帶點，一種不帶點）和兩種大小寫配對：i/İ和ı/I。 - 在德語 (de) 中，
ß在大寫時可能變為ẞ(U+1E9E)。 - 在希臘語 (el) 中，當整個單詞大寫時，母音失去重音 (
ά/Α)，除了分離連詞 eta (ή/Ή)。此外，第一個母音帶有重音的複母音會失去重音並在第二個母音上獲得一個變音符號 (άι/ΑΪ)。
語法
css
/* Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;
font-variant-caps 屬性使用以下列表中的單個關鍵字值指定。在每種情況下，如果字型不支援 OpenType 值，則會合成字形。
值
normal-
停用替代字形的使用。
small-caps-
啟用小型大寫字母的顯示（OpenType 特性：
smcp）。小型大寫字母字形通常使用大寫字母的形式，但顯示時與小寫字母大小相同。 all-small-caps-
啟用大寫和小寫字母都顯示為小型大寫字母（OpenType 特性：
c2sc,smcp）。 petite-caps-
啟用袖珍大寫字母的顯示（OpenType 特性：
pcap）。 all-petite-caps-
啟用大寫和小寫字母都顯示為袖珍大寫字母（OpenType 特性：
c2pc,pcap）。 unicase-
啟用將大寫字母顯示為小型大寫字母，小寫字母顯示為常規小寫字母的混合顯示（OpenType 特性：
unic）。 titling-caps-
啟用標題大寫字母的顯示（OpenType 特性：
titl）。大寫字母字形通常設計用於與小寫字母一起使用。當用於全大寫標題序列時，它們可能顯得過於突出。標題大寫字母專門為此情況設計。
無障礙
大量使用 font-variant 值為 all-small-caps 或 all-petite-caps 的文字對於患有認知障礙（如閱讀障礙）的人來說可能難以閱讀。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 離散 |
正式語法
font-variant-caps =
normal |
small-caps |
all-small-caps |
petite-caps |
all-petite-caps |
unicase |
titling-caps
示例
設定小型大寫字母字型變體
HTML
html
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>
CSS
css
.small-caps {
font-variant-caps: small-caps;
font-style: italic;
}
.normal {
font-variant-caps: normal;
font-style: italic;
}
結果
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-variant-caps-prop |
瀏覽器相容性
載入中…