html - small-caps font-variant CSS クラスが無視されるのはなぜですか?

Question

このCSSクラスを追加しました：

.beanies {
    font-variant: small-caps;
}

私はそれをいくつかの場所から呼び出し、別のクラスと組み合わせて、この両方の方法で試しています:

<p class="coolPools beanies">LICENSE #764014</p>

...この：

<h3 class="statelyPresence, beanies">NEW POOL LAW REQUIRES IMMEDIATE ACTION AT ALL APARTMENT AND CONDOMINIUM POOLS AND SPAS</h3>

(IOW、要素に適用する 2 つのクラス間の区切りコンマの有無にかかわらず)

...どちらの場合も、テキストは小文字で表示されません。

私は何を間違っていますか？

score 7 · Accepted Answer

スモールキャップとは、小文字が大文字のわずかに小さいバリエーションに変換されることを意味します。大文字は変更されません。大文字しかないので、違いはわかりません。

試す：

<h3 class="statelyPresence beanies">New pool law requires immediate action at all apartment and condominium pools and spas</h3>

一般的には、HTML を「普通に」記述し、必要に応じてすべての単語を大文字にするなど、CSS を使用してテキストスタイルを適用することが目標です。

(補足: クラスリストにカンマはありません。)

score 5 · Accepted Answer

それは機能しており、あなたは間違っていません。しかし、すべて大文字であるため、表示されません。

これを書きます：

.beanies {
    font-variant: small-caps;
    text-transform: lowercase;
}
.beanies:first-letter {
    text-transform: uppercase;
}

3 に答える 3