Fonts-variants - CSS-triki

Anonim

font-variantĪpašums ļauj mainīt mērķtiecīgu tekstu mazajiem burtiem. Šis īpašums ir paplašināts CSS3.

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

Pirms CSS3 šis rekvizīts pieņēma vienu no divām iespējamām vērtībām: normal(kā teksts tiek renderēts pēc noklusējuma) un small-caps.

Vērtība small-capsatveidos tekstu ar lielajiem burtiem, kas ir mazāki par parastajiem lielajiem burtiem. Tas neņem vērā satura augšējo burtu kopu marķējuma iekšpusē. Piemēram:

Pārbaudiet šo pildspalvu!

Iepriekš minētajā demonstrācijā abi punkti ir iestatīti uz font-variant: small-caps. Pirmajā rindkopā ir tikai pirmā burta lielie burti, tāpēc tas parādās kā paredzēts (pirmā burta lielais burts, pārējais mazajos burtos).

Otrā rindiņa ir uzrakstīta ar lielajiem burtiem marķējumā, kas ignorē small-capsvērtību, visu iestatot parastajos lielajos burtos.

Turpinot to tālāk, ja šie punkti ir iestatīti uz font-variant: small-capsun text-transform: lowercase, tad tie tiks parādīti visos mazajos burtos. Līdzīgi, ja šie punkti ir iestatīti uz font-variant: small-capsun text-transform: uppercase, tad tie tiks parādīti ar visu parasto lielo burtu.

font-variantvar iekļaut kā daļu no fontstenogrāfijas deklarācijas.

Jauni papildinājumi CSS3

Ar CSS3, font-variantkļūst ērtākais un var pieņemt vairākas vērtības, tai skaitā all-small-caps, petite-caps, all-petite-caps, titling-caps, un unicase, cita starpā.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Darbi Darbi Darbi Darbi Darbi Darbi Darbi

CSS3 pievienotajām jaunajām vērtībām nav pārlūkprogrammas atbalsta, tāpēc iepriekš redzamā tabula atspoguļo vērtību small-caps.

Operētājsistēmā IE6 / 7 iestatījums font-variant: small-capsizraisīs jebkuru tekstu, kas iestatīts uz text-transform: uppercasevai text-transform: lowercaseparādīsies līdzīgs text-transform: none.