Вариант шрифта: капитель; vs text-transform: капитализировать;

Ответ 1

если вы используете text-transform: capitalize, слово "переполнение стека" станет "переполнением стека", только первая буква каждого слова получает CAPS.

но если вы используете font-variant: small-caps, слово "переполнение стека" станет "STACK OVERFLOW", но высота шрифта будет соответствовать высоте строчных букв до применения стиля CSS. поэтому все CAPS, но меньше. (Sᴛᴀᴄᴋ Oᴠᴇʀғʟᴏᴡ)

и text-transform: uppercase тоже делает все CAPS, но шрифт остается того же размера, поэтому шрифт uppercase будет больше, чем small-caps

Ответ 2

Верхний регистр - это текст, состоящий из обычных символов верхнего регистра:

ВЕРХНИЙ

Small-caps выглядит так (взято из здесь):

Статья в Википедии о Small caps

text-transform не работает в некоторых браузерах: см. здесь.

Например:

В версиях Internet Explorer для Windows до 7 включительно, значения нижнего и верхнего регистра ведут себя как ничто, если свойство font-variant установлено в small-caps.

Ответ 3

В обычной типографии существует огромная разница в малогабаритных и прописных строках, как заявил один из участников этого форума. Малые шапки имеют заглавные буквы с высотой x (почти), равной строчным символам.

Чтобы подражать этому с помощью CSS, вы можете использовать font-variant: small-caps;.

Когда вы используете это с настраиваемой линией шрифта (инициированной с помощью @font-face), иногда это происходит неправильно.

Попробуйте добавить text-transform: lowercase;, прежде чем добавить font-variant:

.smallcaps {
    text-transform: lowercase;
    font-variant: small-caps;
}