CSS šrifto dydžio pamoka - kaip pakeisti teksto dydį HTML

Norėdami font-sizenustatyti teksto dydį, naudokite ypatybę CSS .

.container { font-size: 33px; } 

Ši nuosavybė reikalauja kelių tipų verčių:

  • Raktiniai žodžiai (absoliutaus dydžio ir santykinio dydžio raktiniai žodžiai),
  • Ilgis (pvz., Pikselių (px) ir em vienetai) ir
  • Procentai.
.container { font-size: xx-large; } 

Kyla klausimas: kokio tipo vertę turėtumėte pasirinkti ir kodėl?

Tai klausimas, kurį sprendžia šis straipsnis. Tai parodys, kaip naudoti font-sizenuosavybę ir skirtumus tarp daugybės verčių. Taigi, kai kitą kartą reikės pakeisti teksto šrifto dydį, žinosite, kurią vertę pasiekti.

Raktinių žodžių vertės

Yra dviejų tipų raktinių žodžių vertės, kurias galite naudoti su šrifto dydžiu: absolute-sizeir relative-sizeraktiniai žodžiai. Pradėkime nuo absoliutaus.

Absoliutaus dydžio raktiniai žodžiai

Žemiau pateiktame kode smallHTML tekstui dydis naudojamas absoliutaus dydžio raktinis žodis .

.childElement { font-size: small; } 

Galima rinktis iš daugiau absoliutaus dydžio raktinių žodžių parinkčių:

  • xx-mažas
  • x-mažas
  • mažas
  • vidutinis
  • didelis
  • x-didelis
  • xx-didelis
  • xxx-didelis

Absoliutaus dydžio raktinio žodžio vertę nustato naršyklės numatytasis šrifto dydis. Paprastai tas dydis yra vidutinis.

Santykinio dydžio raktiniai žodžiai

Santykinio dydžio raktiniai žodžiai yra dar viena raktinių žodžių parinktis, į kurią reikia atsižvelgti. Turite pasirinkti iš dviejų: smallerir larger.

.parentElement { font-size: smaller; } 

Elemento su santykinio dydžio raktiniu žodžiu šrifto dydis yra santykinis - didesnis ar mažesnis - su jo pirminio šrifto dydžiu.

Kitaip tariant, pagrindinio elemento šrifto dydis turi įtakos antrinio elemento šrifto dydžiui, kaip matote žemiau.

Šiame pavyzdyje santykinio dydžio raktinis žodis smallertaikomas antriniam elementui, o absoliutaus dydžio reikšmė large- pagrindiniam elementui.

Ilgio vertės

font-sizepriima keletą skirtingų ilgio verčių. Mes ištirsime tris iš jų: taškų (px) ir em bei rem vienetus. Nepaisant pasirinkimo, jūsų naudojama ilgio vertė turi būti teigiama.

.parentElement { font-size: 60px; } 

Pikseliai

Pikseliai yra absoliutus ilgio vienetas. Tai reiškia, kad jų neveikia kiti elementai, pvz., Pagrindinis elementas ar lango dydis.

Todėl pikseliai yra tikslūs: jūs nustatote tikslų elementui reikalingų pikselių skaičių ir paprastai tai ir gaunate. Tačiau tarp naršyklių gali būti nedideli skirtumai.

Atkreipkite dėmesį, kad antriniai elementai naudoja pixelsir turi tą patį šrifto dydį aukščiau pateiktame kodo pavyzdyje.

EM

Nors galite galvoti apie taškus kaip fiksuotus, galvokite apie em reikšmes kaip apie kintamąsias.

Taip yra todėl, kad em vertės yra santykinio ilgio vienetas. Šrifto dydis elemento, kuri naudoja em vertės yra santykinės , dėl šrifto dydžio savo tėvų.  

Tačiau tarkime, kad nenustatėte pagrindinio elemento šrifto dydžio. Jūs taip pat nenustatėte vieno kito aukščiau DOM. Tokiu atveju em vertė apskaičiuojama pagal numatytąjį naršyklės nustatymą (dažnai 16 taškų).

Patikslinkime šią idėją.

Tarkime, kad pagrindinis elementas nustatytas į 30 taškų, o antrasis elementas - į 2em. Tada antrinio elemento pateikto šrifto dydis yra 60 taškų (2 x 30 taškų = 60 taškų). Šį scenarijų galite pamatyti žemiau esančiame kode.

em vertės gali būti problemiškos dėl jų jungiamojo poveikio, kuris parodytas kitame pavyzdyje.

Kai turite kelis elementus, kurie naudoja vienas kitam įterptas em reikšmes, šrifto dydžio reikšmės sujungiamos: jos tampa vis didesnės. Tai yra sudėtinis poveikis veikiant.

REM

Įveskite rem reikšmes, kurios buvo sukurtos sprendžiant sudėtinę emų problemą.

Prisiminkime, kad em reikšmės yra susijusios su pagrindiniu elementu. Priešingai, rem vertės yra lyginamos su šaknies (html) elemento šrifto dydžiu.  

Tai reiškia, kad elementui galite pritaikyti rem vertę, ir tai neturės įtakos tėvų šrifto dydžiui. Tai išvengia anksčiau patirto sudėtinio efekto.

Šiame pavyzdyje naudojama font-sizenuosavybė su rem verte.

Štai pagrindinis punktas iš aukščiau pateikto pavyzdžio: pirminio elemento šrifto dydis neturi įtakos antrinių elementų šrifto dydžiui.

Procentai

Procentai siūlo dar vieną būdą nustatyti šrifto dydį, palyginti su pagrindinio elemento šrifto dydžiu.

Elementas su procentais nurodo jo pirminį elementą, kuris nustato jo šrifto dydį. Procentinė vertė turi būti teigiama.

Štai pavyzdys.

Kaip matote, kalbėdami apie šrifto dydį, turite daug galimybių, kad atitiktų jūsų poreikius.

Apie mokymąsi programuoti ir geriausius būdus tai rašau amymhaddad.com. taip pat tviteriu apie programavimą, mokymąsi ir produktyvumą: @amymhaddad.