font-variantВластивість дозволяє змінити цільової текст капітелі. Це властивість було розширено в CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )До CSS3 ця властивість приймала одне з двох можливих значень: normal(як текст відображається за замовчуванням) та small-caps.
Значення small-capsбуде відображати текст великими літерами, меншими за звичайні великі літери. Це не замінює верхній регістр набору у вмісті всередині розмітки. Наприклад:
У наведеній вище демонстрації для обох абзаців встановлено значення font-variant: small-caps. Перший абзац має лише першу літеру великої букви у розмітці, тому він виглядає, як очікувалось (перша буква велика, решта малими прописними буквами).
Другий рядок пишеться великими літерами у розмітці, що замінює small-capsзначення, встановлюючи все в звичайному верхньому регістрі.
Якщо взяти це далі, якщо для цих абзаців встановлено значення font-variant: small-capsі text-transform: lowercase, тоді вони з’являться у всіх маленьких заголовках. Подібним чином, якщо для цих абзаців встановлено значення font-variant: small-capsі text-transform: uppercase, то вони відображатимуться у всіх звичайних великих регістах.
font-variantможуть бути включені як частина fontскороченої декларації.
Нові доповнення в CSS3
В CSS3, font-variantстає узагальнюючим і може приймати кілька значень, в тому числі all-small-caps, petite-caps, all-petite-caps, titling-caps, і unicase, серед інших.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Працює | Працює | Працює | Працює | Працює | Працює | Працює |
Нові значення, додані в CSS3, не підтримують браузер, тому в таблиці вище представлена підтримка значення small-caps.
В IE6 / 7 налаштування font-variant: small-capsпризведе до того, що будь-який текст, встановлений text-transform: uppercaseабо text-transform: lowercaseвиглядатиме як text-transform: none.