为什么我的小型大写字体变体 CSS 类被忽略？答案

【问题标题】：Why is my small-caps font-variant CSS class being disregarded?为什么我的小型大写字体变体 CSS 类被忽略？
【发布时间】：2013-11-13 10:52:38
【问题描述】：

我添加了这个 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，我应用于元素的两个类之间有或没有逗号分隔）

...在这两种情况下，文本都不会以小型大写字母显示。

我做错了什么？

【问题讨论】：

【解决方案1】：

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

试试：

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

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

（旁注：课程列表中没有逗号。）

【讨论】：

【解决方案2】：

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

这样写：

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

【讨论】：

【解决方案3】：

通过排版定义，当文本为“small caps”时，其小写字母显示为可爱的大写小版本。您的示例中没有任何小写字母，因此这些字符的显示方式都与您输入的方式不同。如果你使用all small caps，大写字母也会变得可爱和小。

试试这个 (demo)：

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

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

警告： Safari 或 Internet Explorer 中的 may not work。

【讨论】：