为什么我的小写字体字体变化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，我要应用于该元素的两个类之间是否有逗号分隔）

...而且在任何情况下，文本都不会大写显示。

我究竟做错了什么？

Answer 1

它正在工作，你没有错。但它不可见，因为你有全部大写字母。

写这个：

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

在这里摆弄。

Answer 2

小写大写意味着将小写字母变成小写的大写字母变体。大写字母保持不变。由于您只有大写字母，因此看不到任何区别。

尝试：

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

演示：http：//jsfiddle.net/Mn48Q/

通常，目标是您“正常”编写HTML并使用CSS来应用文本样式，包括在必要时将所有单词大写。

（附带说明：班级列表中没有逗号。）