font-sizeNuosavybė nurodo dydį, ar aukštį, šrifto. font-sizeveikia ne tik šriftą, kuriam jis taikomas, bet ir naudojamas apskaičiuojant em, rem ir ex ilgio vienetų vertę.
p ( font-size: 20px; )font-sizekaip reikšmes gali priimti raktinius žodžius, ilgio vienetus ar procentus. Tačiau svarbu atkreipti dėmesį į tai, kad ji yra privaloma vertė , kai ji deklaruojama kaip fontstenografinio turto font-sizedalis. Jei jis nėra įtrauktas į trumpinį, nepaisoma visos eilutės.
Taikomos ilgio vertės (pvz., Px, em, rem, ex ir kt.) font-sizeNegali būti neigiamos.
Absoliutūs raktiniai žodžiai ir vertybės
.element ( font-size: small; )Jis priima šias absoliučias raktinių žodžių reikšmes:
xx-smallx-smallsmallmediumlargex-largexx-large
Šios absoliučios vertės susiejamos su konkrečiais šriftų dydžiais, kuriuos apskaičiuoja naršyklė. Bet jūs taip pat galite naudoti dvi raktinių žodžių reikšmes, kurios yra susijusios su pagrindinio elemento šrifto dydžiu.
Kitos absoliučios vertės yra mm(milimetrai), cm(centimetrai), in(coliai), pt(taškai) ir pc(picas). Vienas taškas yra lygus 1/72 colio, o vienas pica yra lygus 12 taškų - šios vertės paprastai naudojamos spausdinant dokumentus.
Santykiniai raktiniai žodžiai
.element ( font-size: larger; )largersmaller
Pvz., Jei pirminio elemento šrifto dydis yra small, antrinis elementas su apibrėžtu santykiniu dydžiu largerpadarys vaiko šrifto dydį lygų medium.
Procentinės vertės
.element ( font-size: 110%; )Procentinės vertės, pvz., 110% šrifto dydžio nustatymas, taip pat yra susijusios su pagrindinio elemento šrifto dydžiu, kaip parodyta toliau pateiktoje demonstracijoje:
„CodePen“ žiūrėkite CSS-Tricks (@ css-tricks) „Pen qdbELL“.
Jų vienetas
.element ( font-size: 2em; )„Em“ vienetas yra santykinis vienetas, pagrįstas pagrindinio elemento šrifto dydžio apskaičiuota verte. Tai reiškia, kad vaiko elementai visada priklauso nuo tėvų, norėdami nustatyti savo šrifto dydį. Pavyzdžiui:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Ankstesniame pavyzdyje pastraipos šrifto dydis bus 16 taškų, nes 1 x 16 = 16 taškų, o antraštė bus 32 taškų, nes 2 x 16 = 32 taškų. Atsižvelgiant į pagrindinio elemento šrifto dydį, mastelio padidinimui yra daugybė pranašumų, būtent mes galime apvynioti elementus konteineryje ir žinoti, kad visi vaikai visada bus vienas kito atžvilgiu:
Žr. Rašiklį, kuriame išsiaiškinama, kaip „CSS-Tricks“ (@ css-tricks) veikia „EMP“ įrenginys „CodePen“.
Remo vienetas
Tačiau rem vienetų atveju šrifto dydis priklauso nuo šakninio elemento (arba htmlelemento) vertės.
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Ankstesniame pavyzdyje rem vienetas yra lygus 16 taškų (nes jis paveldėtas iš html/ root elemento), taigi visų pastraipos elementų šrifto dydis bus apskaičiuotas iki 24 taškų (1,5 x 16 = 24). Skirtingai nuo em vienetų, pastraipoje bus ignoruojami visų jos tėvų, išskyrus šaknį, stilius.
Šį įrenginį palaiko šios naršyklės:
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Veikia | Veikia | Veikia | Veikia | 10+ | Veikia | Veikia |
Buvęs vienetas
.element ( font-size: 20ex; )Ex vienetams 1ex būtų lygus apskaičiuotam šaknies elemento mažosios raidės x aukščiui. Taigi žemiau pateiktame pavyzdyje htmlelementas yra nustatytas 20pxir visi kiti šriftų dydžiai nustatomi pagal konkretaus šrifto x aukštį.
Žr. Rašiklį, kuriame išsiaiškinama, kaip „ex-unit“ veikia naudojant CSS-Tricks (@ css-tricks) „CodePen“.
Eksperimentuoti su virš mano pakeičiant demo font-familyant htmlelemento pamatyti, kaip kitas šrifto dydis kaita.
„Viewport“ vienetai
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Peržiūros srities vienetai, pvz., vwIr vh, nustato elemento šrifto dydį, palyginti su peržiūros srities matmenimis:
- 1vw = 1% peržiūros srities pločio
- 1vh = 1% peržiūros srities aukščio
Taigi, jei paimsime šį pavyzdį:
.element ( font-size: 100vh; )Tada tai nurodys, kad elemento šrifto dydis visada turėtų būti 100% peržiūros srities aukščio (50vh būtų 50%, 15vh būtų 15% ir pan.). Žemiau pateiktoje demonstracijoje pabandykite pakeisti pavyzdžio aukštį, kad galėtumėte stebėti tipo tempimą:
Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) rašiklio dydžio su vh vienetais tipą „CodePen“.
vw vienetai skiriasi tuo, kad nustato raidžių formos aukštį pagal peržiūros srities plotį, todėl žemiau esančioje demonstracinėje versijoje turėsite horizontaliai pakeisti naršyklės lango dydį, kad pamatytumėte šiuos pakeitimus:
„CodePen“ ieškokite „CSS-Tricks“ (@ css-tricks) „Pen Screens“ tipo su „vw unit“.
Šiuos vienetus palaiko šios naršyklės:
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1 ir naujesnės versijos |
Svarbu pažymėti, kad yra dar du peržiūros srities vienetai: vminir vmax. Pirmasis rasite vertybių vhir vwir nustatyti font-size kaip mažiausias iš dviejų, o vmaxNustato font-size iki didžiausių šių dviejų verčių.
Ch vienetas
.element ( font-size: 24ch; )chVienetas yra panašus į extuo, kad jis bus nustatyti šrifto-dydis elemento atžvilgiu į 0 (nulis) Glyph šrifto pločio vienetui:
„CodePen“ peržiūrėkite „CSS-Tricks“ (@ css-tricks) „Pen Sizing“ tipo su ch vienetais tipą.
Šį įrenginį palaiko:
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 27+ | Veikia | 10+ | Veikia | 9+ | Veikia | Veikia |