Почему мой класс 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 для применения стилевого оформления текста, включая прописные буквы всех слов, когда это необходимо.

(Примечание: в списках классов нет запятых.)

Answer 3

По определению набора текста, когда текст - это "маленькие заглавные буквы", его строчные буквы отображаются как симпатичные маленькие версии самих себя в верхнем регистре. В вашем примере нет строчных букв, поэтому ни один из ваших символов не отображается иначе, чем вы их набрали. Если бы вы использовали все заглавные буквы, заглавные буквы также стали бы милыми и маленькими.

Попробуйте это (демо):

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

Mozilla описывает и показывает различия с интерактивной демонстрацией в своих документах MDN.

Предупреждение: это может не работать в Safari или Internet Explorer.