font-sizeĪpašums norāda izmēru, vai augstumu, no fontu. font-sizeietekmē ne tikai fontu, kuram tas tiek lietots, bet tiek izmantots arī, lai aprēķinātu em, rem un ex garuma vienību vērtību.
p ( font-size: 20px; )font-sizevar pieņemt atslēgvārdus, garuma mērvienības vai procentus kā vērtības. Tomēr ir svarīgi atzīmēt, ka tā ir obligāta vērtība , kad tā tiek deklarēta kā daļa no fontstenogrāfijas īpašuma font-size. Ja tas nav iekļauts stenogrāfijā, visa līnija tiek ignorēta.
Izmantotās garuma vērtības (piemēram, px, em, rem, ex utt.) font-sizeNevar būt negatīvas.
Absolūti atslēgvārdi un vērtības
.element ( font-size: small; )Tā pieņem šādas absolūtās atslēgvārdu vērtības:
xx-smallx-smallsmallmediumlargex-largexx-large
Šīs absolūtās vērtības tiek kartētas pēc konkrētiem fontu lielumiem, ko aprēķina pārlūks. Varat arī izmantot divas atslēgvārda vērtības, kas ir saistītas ar vecāka elementa fonta lielumu.
Citas absolūtās vērtības ir mm(milimetri), cm(centimetri), in(collas), pt(punkti) un pc(picas). Viens punkts ir vienāds ar 1/72 collas, bet viens attēls ir vienāds ar 12 punktiem - šīs vērtības parasti izmanto drukātiem dokumentiem.
Relatīvie atslēgvārdi
.element ( font-size: larger; )largersmaller
Piemēram, ja vecāka elementa fonta lielums ir small, pakārtotajam elementam ar noteiktu relatīvo lielumu largerfonts būs vienāds ar mediumpakārtotā elementa lielumu .
Procentuālās vērtības
.element ( font-size: 110%; )Procentuālās vērtības, piemēram, fonta lieluma iestatīšana 110% apmērā, arī ir saistītas ar vecākā elementa fonta lielumu, kā parādīts zemāk esošajā demonstrācijā:
Skatiet CSS-Tricks Pen @ qdbELL (@ css-tricks) vietnē CodePen.
Em vienība
.element ( font-size: 2em; )Em vienība ir relatīva vienība, kuras pamatā ir vecāka elementa fonta lieluma aprēķinātā vērtība. Tas nozīmē, ka bērnu elementi vienmēr ir atkarīgi no viņu vecākiem, lai iestatītu fonta lielumu. Piemēram:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Iepriekš minētajā piemērā rindkopas fonta lielums būs 16 pikseļi, jo 1 x 16 = 16 pikseļi, bet virsraksts būs 32 pikseļi, jo 2 x 16 = 32 pikseļi. Atkarībā no vecākelementa fonta lieluma, palielināšanai ir daudz priekšrocību, proti, mēs varam ietīt elementus konteinerā un zināt, ka visi bērni vienmēr būs savstarpēji saistīti:
Skatiet pildspalvu, lai uzzinātu, kā em vienība darbojas CSS-Tricks (@ css-tricks) vietnē CodePen.
Remvienība
Tomēr rem vienību gadījumā fonta lielums ir atkarīgs no saknes elementa (vai htmlelementa) vērtības.
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Iepriekš minētajā piemērā rem vienība ir vienāda ar 16 pikseļiem (jo tā tiek mantota no html/ root elementa), un tādējādi visu rindkopu elementu fonta lielums tiks aprēķināts līdz 24 pikseļiem (1,5 x 16 = 24). Atšķirībā no em vienībām, rindkopā tiks ignorēts visu vecāku stils, izņemot sakni.
Šo vienību atbalsta šādas pārlūkprogrammas:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | Darbi | Darbi | Darbi | 10+ | Darbi | Darbi |
Bijusī vienība
.element ( font-size: 20ex; )Ex vienībām 1ex būtu vienāds ar saknes elementa mazā burta x aprēķināto augstumu. Tātad zemāk esošajā piemērā htmlelements ir iestatīts uz, 20pxun visus pārējos fonta lielumus nosaka šī konkrētā fonta x augstums.
Skatiet pildspalvu, lai uzzinātu, kā ex vienība darbojas CSS-Tricks (@ css-tricks) vietnē CodePen.
Eksperiments ar demo virs mana aizstājot font-familyuz htmlelementa, lai redzētu, kā citi font-izmēru izmaiņas.
Skatu loga vienības
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Skata loga vienības, piemēram, vwun vh, iestata elementa fonta lielumu attiecībā pret skata porta izmēriem:
- 1vw = 1% no skata platuma
- 1vh = 1% no skata loga augstuma
Tātad, ja ņemam šādu piemēru:
.element ( font-size: 100vh; )Tad tas noteiks, ka elementa fonta lielumam vienmēr jābūt 100% no skata augstuma (50vh būtu 50%, 15vh būtu 15% un tā tālāk). Zemāk esošajā demonstrācijā mēģiniet mainīt piemēra augstumu, lai skatītos, kā tips stiepjas:
Skatiet CSS-Tricks (@ css-tricks) pildspalvas lieluma veidu ar vh vienībām vietnē CodePen.
vw vienības atšķiras ar to, ka tā nosaka burtu formu augstumu pēc skata platuma, tāpēc zemāk esošajā demonstrācijā pārlūkprogrammas loga izmērs ir jāmaina horizontāli, lai redzētu šīs izmaiņas:
Skatiet CSS-Tricks (@ css-tricks) pildspalvas lieluma veidu ar vw vienībām vietnē CodePen.
Šīs vienības atbalsta šādas pārlūkprogrammas:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Ir svarīgi atzīmēt, ka ir vēl divas skata vienības: vminun vmax. Pirmais atradīs vērtības vhun vwun iestatīs fonta lielumu kā mazāko no abiem, bet vmaxfonta lielumu - lielāko no šīm divām vērtībām.
Ch vienība
.element ( font-size: 24ch; )chVienība ir līdzīgs exvienības, ka tā uzstādītu burtu-lielumu elementu attiecībā pret platumu 0 (nulle) glifu no fontu:
Skatiet CSP-Tricks (@ css-tricks) pildspalvas lieluma veidu ar ch vienībām vietnē CodePen.
Šo vienību atbalsta:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Darbi | 10+ | Darbi | 9+ | Darbi | Darbi |