Font-variant - CSS-Tricks

Anonim

font-variantProprietatea vă permite să modificați textul vizat pentru capace mici. Această proprietate a fost extinsă în CSS3.

p:first-line ( font-variant: small-caps; /* default is `normal` */ )

Înainte de CSS3, această proprietate accepta una dintre cele două valori posibile: normal(modul în care textul este redat în mod implicit) și small-caps.

O valoare de small-capsva reda textul cu litere mari care sunt mai mici decât literele majuscule obișnuite. Acest lucru nu suprascrie setul cu majuscule din conținut, în interiorul marcajului. De exemplu:

Verificați acest stilou!

În demo-ul de mai sus, ambele paragrafe sunt setate la font-variant: small-caps. Primul paragraf are doar prima literă majusculă în marcaj, deci apare așa cum era de așteptat (prima literă majusculă, restul cu majuscule).

Al doilea rând este scris în toate majusculele din marcaj, care suprascrie small-capsvaloarea, setând totul în majuscule obișnuite.

Mai departe, dacă aceste paragrafe sunt setate la font-variant: small-capsși text-transform: lowercase, atunci vor apărea în toate majusculele. În mod similar, dacă aceste paragrafe sunt setate la font-variant: small-capsși text-transform: uppercase, atunci vor apărea în toate majusculele obișnuite.

font-variantpoate fi inclus ca parte a unei fontdeclarații pe scurt.

Adăugări noi în CSS3

In CSS3, font-variantdevine o prescurtare si poate accepta mai multe valori, inclusiv all-small-caps, petite-caps, all-petite-caps, titling-caps, și unicase, printre altele.

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări

Noile valori adăugate în CSS3 nu au suport pentru browser, deci tabelul de mai sus reprezintă suport pentru o valoare de small-caps.

În IE6 / 7, setarea font-variant: small-capsva provoca orice set text text-transform: uppercasesau text-transform: lowercasesă apară ca text-transform: none.