Veličina slova - CSS-trikovi

font-sizeImovine određuje veličinu ili visinu, fonta. font-sizeutječe ne samo na font na koji je primijenjen, već se koristi i za izračunavanje vrijednosti jedinica em, rem i ex duljine.

p ( font-size: 20px; )

font-sizemogu prihvatiti ključne riječi, jedinice dužine ili postotke kao vrijednosti. Važno je napomenuti da je obvezna vrijednost kada je proglašena dijelom fontstenografskog svojstva font-size. Ako nije uključen u stenografiju, zanemaruje se cijeli redak.

Vrijednosti duljine (npr. Px, em, rem, ex, itd.) Na koje se primjenjuju font-sizene mogu biti negativne.

Apsolutne ključne riječi i vrijednosti

.element ( font-size: small; )

Prihvaća sljedeće apsolutne vrijednosti ključnih riječi:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Te apsolutne vrijednosti mapiraju se u određene veličine fontova kako ih izračunava preglednik. Ali možete koristiti i dvije vrijednosti ključnih riječi koje su u odnosu na veličinu fonta nadređenog elementa.

Ostale apsolutne vrijednosti uključuju mm(milimetre), cm(centimetre), in(inče), pt(točke) i pc(picas). Jedna točka jednaka je 1/72 inča, dok je jedna pika 12 bodova - ove se vrijednosti obično koriste za tiskane dokumente.

Relativne ključne riječi

.element ( font-size: larger; )

• larger
• smaller

Na primjer, ako nadređeni element ima veličinu fonta small, podređeni element s definiranom relativnom veličinom largeručinit će veličinu fonta jednakom mediumza podređeni element.

Postotne vrijednosti

.element ( font-size: 110%; )

Vrijednosti postotka, poput postavljanja veličine fonta od 110%, također su u odnosu na veličinu fonta nadređenog elementa, kao što je prikazano u demonstraciji ispod:

Pogledajte Pen qdbELL by CSS-Tricks (@ css-tricks) na CodePenu.

Jedinica em

.element ( font-size: 2em; )

Em jedinica je relativna jedinica koja se temelji na izračunatoj vrijednosti veličine fonta nadređenog elementa. To znači da podređeni elementi uvijek ovise o roditelju da bi postavili veličinu fonta. Na primjer:

 
This is a heading
This is some text.

.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )

U gornjem primjeru odlomak će imati veličinu fonta 16px jer je 1 x 16 = 16px, dok će naslov biti 32px jer je 2 x 16 = 32px. Mnogo je prednosti povećanja vrste ovisno o veličini fonta nadređenog elementa, naime možemo umotati elemente u spremnik i znati da će sva djeca uvijek biti međusobno međusobno povezana:

Pogledajte olovku kako doznajete kako em jedinica radi pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Rem jedinica

U slučaju rem jedinica, međutim, veličina fonta ovisi o vrijednosti korijenskog elementa (ili htmlelementa).

html ( font-size: 16px; ) p ( font-size: 1.5rem; )

U gornjem primjeru, rem jedinica je jednaka 16px (jer je naslijeđena od html/ root elementa), pa će se veličina fonta za sve elemente odlomka izračunati na 24px (1,5 x 16 = 24). Za razliku od em jedinica, odlomak će zanemariti stil svih svojih roditelja osim korijena.

Ovu jedinicu podržavaju sljedeći preglednici:

Krom	Safari	Firefox	Opera	IE	Android	iOS
Djela	Djela	Djela	Djela	10+	Djela	Djela

Bivša jedinica

.element ( font-size: 20ex; )

Za ex jedinice, 1ex bi bio jednak izračunatoj visini malog slova x korijenskog elementa. Dakle, u primjeru ispod postavljen je htmlelement, 20pxa sve ostale veličine fontova određene su x-visinom određenog fonta.

Pogledajte olovku kako doznajete kako bivša jedinica radi pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Eksperiment s demo iznad moje zamjene font-familyna htmlelementu vidjeti kako drugi font-veličina promjene.

Jedinice vidnog polja

.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )

Jedinice okvira za prikaz , poput vwi vh, postavljaju veličinu fonta elementa u odnosu na dimenzije okvira za prikaz:

• 1vw = 1% širine vidnog polja
• 1 vh = 1% visine vidnog polja

Dakle, ako uzmemo sljedeći primjer:

.element ( font-size: 100vh; )

Tada će se reći da veličina fonta elementa uvijek treba biti 100% visine okvira za prikaz (50vh bi bilo 50%, 15vh bi bilo 15% i tako dalje). U demonstraciji u nastavku pokušajte promijeniti veličinu visine primjera kako biste gledali kako se rasteže vrsta:

Pogledajte vrstu veličine olovke s vh jedinicama tvrtke CSS-Tricks (@ css-tricks) na CodePen-u.

vw jedinice se razlikuju po tome što postavlja visinu oblika slova prema širini okvira za prikaz, tako da ćete u demonstraciji ispod morati horizontalno promijeniti veličinu prozora preglednika da biste vidjeli ove promjene:

Pogledajte vrstu veličine olovke s vw jedinicama tvrtke CSS-Tricks (@ css-tricks) na CodePen-u.

Ove jedinice podržavaju sljedeći preglednici:

Krom	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4,4+	7,1+

Važno je napomenuti da postoje dvije druge jedinice prikaza: vmini vmax. Prvi će pronaći vrijednosti vhi vwi postaviti veličinu fonta kao najmanju od te dvije, dok vmaxveličinu fonta postavlja na najveću od ove dvije vrijednosti.

Jedinica ch

.element ( font-size: 24ch; )

chJedinica je sličan exuređaj u koji će se postaviti slova veličini elementa u odnosu na širinu 0 (nultom) glif fonta:

Pogledajte vrstu veličine olovke s jedinicama ch od CSS-trikova (@ css-trikovi) na CodePenu.

Ovu jedinicu podržavaju:

Krom	Safari	Firefox	Opera	IE	Android	iOS
27+	Djela	10+	Djela	9+	Djela	Djela