Vodič za CSS veličinu fonta - Kako promijeniti veličinu teksta u HTML-u

Pomoću font-sizesvojstva CSS odredite veličinu teksta.

.container { font-size: 33px; } 

Ovo svojstvo uzima nekoliko vrsta vrijednosti:

  • Ključne riječi (apsolutne veličine i ključne riječi relativne veličine),
  • Duljina (kao što su pikseli (px) i em jedinice) i
  • Postoci.
.container { font-size: xx-large; } 

Pitanje je: koju vrstu vrijednosti biste trebali odabrati i zašto?

Toga se pitanja bavi ovaj članak. Pokazat će vam kako koristiti font-sizesvojstvo i razlike između mnogih vrijednosti. Dakle, sljedeći put kad budete trebali promijeniti veličinu fonta teksta, znat ćete za kojom vrijednošću trebate posegnuti.

Vrijednosti ključnih riječi

Postoje dvije vrste vrijednosti ključnih riječi koje možete koristiti s veličinom fonta: absolute-sizei relative-sizeključne riječi. Krenimo s apsolutnim.

Ključne riječi apsolutne veličine

Kôd u nastavku koristi ključnu riječ apsolutne veličine smallza veličinu HTML teksta.

.childElement { font-size: small; } 

Na izbor je više opcija ključne riječi apsolutne veličine:

  • xx-mali
  • x-mali
  • mali
  • srednji
  • velika
  • x-velika
  • xx-velika
  • xxx-velika

Vrijednost ključne riječi apsolutne veličine određuje se prema zadanoj veličini fonta preglednika. Tipično je ta veličina srednja.

Ključne riječi relativne veličine

Ključne riječi relativne veličine još su jedna opcija koju treba uzeti u obzir. Možete odabrati između dva: smalleri larger.

.parentElement { font-size: smaller; } 

Veličina fonta elementa s ključnom riječi relativne veličine relativna je - veća ili manja - u odnosu na veličinu fonta roditelja.

Drugim riječima, veličina fonta nadređenog elementa utječe na veličinu fonta podređenog elementa, kao što možete vidjeti u nastavku.

U ovom se primjeru ključna riječ relativne veličine smallerprimjenjuje na podređeni element, a vrijednost apsolutne veličine largeprimjenjuje se na nadređeni element.

Vrijednosti duljine

font-sizeprihvaća nekoliko različitih vrijednosti duljine. Istražit ćemo tri od njih: piksele (px) i em i rem jedinice. Unatoč vašem odabiru, vrijednost duljine koju koristite mora biti pozitivna.

.parentElement { font-size: 60px; } 

Piksela

Pikseli su apsolutna jedinica duljine. To znači da na njih ne utječu drugi elementi, poput roditeljskog elementa ili veličina prozora.

Kao rezultat, pikseli su precizni: definirate točan broj piksela koji vam je potreban na elementu i to je obično ono što dobijete. Međutim, mogu postojati male razlike između preglednika.

Primijetite da podređeni elementi koriste pixelsi imaju istu veličinu fonta u gornjem uzorku koda.

EM-ovi

Iako piksele možete smatrati fiksnima, vrijednosti em smatrajte promjenljivima.

To je zato što su vrijednosti em relativna jedinica duljine. Veličina fonta elementa koji koristi vrijednost em relativna je prema veličini fonta njegovog roditelja.  

Međutim, recimo da niste postavili veličinu fonta za nadređeni element. Niti ste ga postavili negdje drugdje gore u DOM-u. U ovom slučaju, vrijednost em izračunava se prema zadanim postavkama preglednika (često 16 piksela).

Učinimo ovu ideju konkretnom.

Recimo da je nadređeni element postavljen na 30 piksela, a podređeni element na 2em. Zatim je prikazana veličina fonta podređenog elementa 60px (2 x 30px = 60px). Ovaj scenarij možete vidjeti u donjem kodu.

vrijednosti em mogu biti problematične zbog njihovog učinka složenja, što je prikazano u sljedećem primjeru.

Kada imate više elemenata koji koriste vrijednosti EM ugniježđene jedna u drugu, vrijednosti veličine fonta sastoje se: one postaju sve veće i veće. Ovo je djelovanje smjese na djelu.

REM-ovi

Unesite rem vrijednosti koje su stvorene za rješavanje složenog problema ems-a.

Sjetimo se da su vrijednosti em relativne u odnosu na nadređeni element. Suprotno tome, rem vrijednosti su u odnosu na veličinu fonta korijenskog (html) elementa.  

To znači da možete primijeniti rem vrijednost na element i na to neće utjecati veličina fonta roditelja. Time se izbjegava gore navedeni učinak složenja.

Ovaj primjer koristi font-sizesvojstvo s rem vrijednošću.

Evo ključna točka iz gornjeg primjera: veličina fonta matičnog elementa se ne utječe na veličinu fonta podređenih elemenata.

Postoci

Procenti nude još jedan način postavljanja veličine fonta u odnosu na veličinu fonta nadređenog elementa.

Element s postotkom odnosi se na nadređeni element kako bi odredio veličinu fonta. Vrijednost postotka mora biti pozitivna.

Evo primjera.

Kao što vidite, kada je riječ o veličini fonta, imate puno opcija koje odgovaraju vašim potrebama.

Pišem o učenju programiranja i najboljim načinima za to na amymhaddad.com. Jatakođertweet o programiranju, učenje i produktivnosti: @amymhaddad.