html - 为什么我的小型大写字体变体 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，我应用于元素的两个类之间有或没有分隔逗号）

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

我究竟做错了什么？

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;
}

score 2 · Accepted Answer

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

试试这个（演示）：

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

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

警告：这在 Safari 或 Internet Explorer 中可能不起作用。

3 回答 3