Why is my small-caps font-variant CSS class being disregarded?

问题

I added this CSS class:

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

I call it from a couple places, coupled with another class, trying it both this way:

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

...and this:

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

(IOW, with or without a separating comma between the two classes I'm applying to the element)

...and in neither case does the text display in small caps.

What am I doing wrong?

回答1:

It is working and you are not wrong. But it is not visible because you have all capital letters.

Write this:

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

Fiddle here.

回答2:

Small-caps means that lowercase letters are turned into slightly smaller variations of uppercase letters. Uppercase letters stay unchanged. Since you only have uppercase letters, you don't see any difference.

Try:

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

Demo: http://jsfiddle.net/Mn48Q/

In general the goal is that you write the HTML "normally" and use CSS to apply text styling, including uppercasing all words when necessary.

(Side note: no commas in class lists.)

来源：https://stackoverflow.com/questions/19740304/why-is-my-small-caps-font-variant-css-class-being-disregarded