Használja a CSS font-sizetulajdonságot a szöveg méretének meghatározásához.

.container { font-size: 33px; } 

Ez a tulajdonság többféle értéket vesz fel:

• Kulcsszavak (abszolút méretű és relatív méretű kulcsszavak),
• - Hossz (például pixel (px) és em egység), és
• Százalékok.

.container { font-size: xx-large; } 

A kérdés a következő: melyik típusú értéket válassza és miért?

Ez a kérdés, amellyel a cikk foglalkozik. Megmutatja, hogyan kell használni a font-sizetulajdonságot, és a különbségeket a sok értéke között. Tehát legközelebb, amikor módosítania kell a szöveg betűméretét, akkor tudja, melyik érték elérése.

Kulcsszóértékek

Kétféle kulcsszóérték használható a betűmérettel: absolute-sizeés a relative-sizekulcsszavak. Kezdjük az abszolútummal.

Abszolút méretű kulcsszavak

Az alábbi kód az abszolút méretű kulcsszót használja smalla HTML szöveg méretezéséhez.

.childElement { font-size: small; } 

Több abszolút méretű kulcsszóopció közül választhat:

• xx-kicsi
• x-kicsi
• kicsi
• közepes
• nagy
• x nagy
• xx-nagy
• xxx-nagy

Az abszolút méretű kulcsszó értékét a böngésző alapértelmezett betűmérete határozza meg. Általában ez a méret közepes.

Relatív méretű kulcsszavak

A relatív méretű kulcsszavak egy másik megfontolandó kulcsszó-opció. Kettő közül választhat: smallerés larger.

.parentElement { font-size: smaller; } 

A relatív méretű kulcsszót tartalmazó elem betűmérete relatív - nagyobb vagy kisebb - a szülő betűméretéhez képest.

Másképp fogalmazva: a szülőelem betűmérete befolyásolja a gyermekelem betűméretét, amint az alább látható.

Ebben a példában a relatív méretű kulcsszót smalleralkalmazzák a gyermek elemre, az abszolút méretű értéket largepedig a szülő elemre.

Hosszúsági értékek

font-sizetöbb különböző hosszúsági értéket fogad el. Hármat fogunk felfedezni: pixeleket (px), valamint em és rem egységeket. Kiválasztása ellenére a használt hosszértéknek pozitívnak kell lennie.

.parentElement { font-size: 60px; } 

Képpontok

A pixelek abszolút hosszúsági egységek. Ez azt jelenti, hogy más elemek, például a szülő elem vagy az ablak mérete nem befolyásolja őket.

Ennek eredményeként a képpontok pontosak: meghatározza az elemhez szükséges pixelek pontos számát, és általában ezt kapja meg. A böngészők között azonban lehetnek kisebb eltérések.

Figyelje meg, hogy az alárendelt elemek pixelsazonos betűméretet használnak és a fenti kódmintában szerepelnek.

EMs

Míg a pixeleket rögzítettnek tekintheti, az em értékeket változónak tekintheti.

Ez azért van, mert az em értékek relatív hosszúsági egységek. Az em értéket használó elem betűmérete a szülő betűméretéhez viszonyítva .  

Tegyük fel azonban, hogy nem állított be betűméretet a szülő elemhez. Te sem állítottál egyet másutt magasabbra a DOM-ban. Ebben az esetben az em érték kiszámítása a böngésző alapértelmezett (gyakran 16 képpontos) felhasználásával történik.

Tegyük konkrétá ezt az ötletet.

Tegyük fel, hogy a szülőelem értéke 30 képpont, a gyermek elem értéke 2em. Ezután a gyermekelem renderelt betűmérete 60 képpont (2 x 30 képpont = 60 képpont). Ezt a forgatókönyvet az alábbi kódban láthatja.

Az em értékek összetett hatásuk miatt problematikusak lehetnek, amelyet a következő példa mutat be.

Ha több olyan elem van, amely egymásba ágyazott em értékeket használ, akkor a betűméret értékek összetettek: egyre nagyobbak lesznek. Ez az összetett hatás a működésben.

REM-ek

Adja meg a rem értékeket, amelyeket az ems összetett problémájának kezelésére hoztak létre.

Emlékezzünk arra, hogy az em értékek a szülő elemhez viszonyítva vannak. Ezzel szemben a rem értékek viszonyítva vannak a gyökér (html) elem betűméretéhez.  

Ez azt jelenti, hogy rem értéket alkalmazhat egy elemre, és a szülő betűmérete nem fogja befolyásolni. Ez kikerüli a fent tapasztalt összetett hatást.

Ez a példa font-sizea rem értékű tulajdonságot használja .

Itt van egy kulcsfontosságú pont a fenti példából: a szülőelem betűmérete nem befolyásolja a gyermekelemek betűméretét.

Százalékok

A százalékok hez még egy újabb módja annak, hogy állítsa be a betűméret képest a szülő elem betűméretet.

A százalékos elem a szülőelemre utal a betűméret meghatározásához. A százalékos értéknek pozitívnak kell lennie.

Itt egy példa.

Mint látható, a betűméretről rengeteg lehetőség áll rendelkezésére, hogy megfeleljen az Ön igényeinek.

Az amymhaddad.com oldalon a program megtanulásáról és a legjobb módszerekről írok. Aztiscsipog a programozáshoz, tanulás, és a termelékenység: @amymhaddad.