为什么我的小型大写字体变体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

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

尝试：

<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来应用文本样式，包括在必要时对所有单词进行大写。

（旁注：班级名单中没有逗号。）

Answer 2

这是有效的，你没有错。但它不可见，因为你有大写字母。

写下这个：

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

Fiddle here.

Answer 3

通过排版定义，当文本为“小写”时，其小写字母显示为大写字母的可爱小版本。您的示例中没有任何小写字母，因此这些字符的显示方式均与您键入方式不同。如果要使用所有小写字母，大写字母也将变得可爱又小。

尝试一下（demo）：

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

Mozilla在其MDN Docs中通过交互式演示来描述并显示差异。

注意事项：在Safari或Internet Explorer中，此may not work。