CSS Relativna Veličina Fonta

Jednu od najvećih zabuna u veb dizajnu uzrokuje niko drugi do svojstvo veličine fonta .
Najčešće korišćene veličine fonta su piksel (px), em i rem.

Zajedno sa ovom osobinom, zbunjenost obično uzrokuju CSS kolone.

Ako ste zainteresovani za svojstva izgleda, pogledajte ovaj članak o svojstvu koje se često koristi - položaj.

Prvo ćemo se fokusirati na svojstvo veličine fonta.

U CSS-u postoji više jedinica (kao što su piksel, em i rem) koje se mogu koristiti, što dizajneru može samo zadati dodatnu glavobolju. U ovom članku ćemo razjasniti upotrebu tih jedinica i sve zablude.

PX jedinica

Najčešća i najpopularnija jedinica je piksel(px). Većina ljudi započinje sa upotrebom jedinice piksela (px) jer vam daje potpunu kontrolu nad veličinom teksta . Ako veličina fonta nije navedena, podrazumevana veličina normalnog teksta, poput pasusa, je 16 piksela.

Glavni problem korišćenja piksel (px) jedinica je taj što, za razliku od em ili rem jedinice, nisu skalabilni i unošenje promena u veličini fonta na različitim veličinama ekrana može biti izazov.

Takođe, jedinica piksela (px) nije povezana ni sa čim. Dakle, ako želite da promenite veličinu, na primer, cele stranice na osnovu veličine ekrana, moraćete da promenite veličinu fonta svakog elementa pojedinačno.

EM jedinica

EM jedinica je prilagodljiv font size jedinica . Povezana je sa veličinom fonta nadređenog kontejnera. Jedan em (1em) jednak je trenutnoj veličini fonta. Tako na primer, ako nadređeni element ima veličinu fonta 16px, 1em je jednak 16px, 2em je 32px i tako dalje ...

Učiniti vaš dizajn prilagodljivim postaje mnogo lakše ako koristite em jedinice umesto px.

Ali, postoji jedna stvar na koju treba voditi računa. Kada koristite em jedinicu, budite oprezni sa gnežđenjem .

Na primer, recimo da ste kreirali odeljak i postavili njegovu veličinu fonta na 2em, sada želite da dodate odlomak u odeljak koji ima veličinu fonta 1em. Veličina fonta pasusa povezana je sa veličinom fonta odeljka. Ako se gnežđenje nastavi ili ako se koristi na više segmenata projekta, možete brzo izgubiti iz vida šta je u odnosu na šta i potpuno se izgubiti.

Sad kad smo razumeli em jedinicu, pravo je vreme da uvedemo rem jedinicu.

REM jedinica

Rem jedinica je druga skalabilna veličina fonta, ali za razliku od jedinice em, povezana je sa osnovnim elementom (HTML) umesto sa roditeljskim elementom . Tu je i dobila rem jedinica (root em = rem).

To znači da, ako koristite rem jedinicu na elementima, možete brzo promeniti veličinu fonta čitavog projekta, samo prilagođavanjem veličine osnovnog fonta. Ovaj način je brz, lak i izbegava sve komplikacije gnežđenja koje biste mogli dobiti tokom upotrebe em jedinice.

Dakle, koju jedinicu treba da koristite?

Najbolji način da odgovorite na ovo pitanje je primer.

Prvo ćemo koristiti px jedinicu.

html { font-size: 100% } //usually this equals to 16px
div { Font-size: 16px; }
div>p { font-size: 14px; }

Ovde možete primetiti da je veličina fonta podešena u pikselima (px) pojedinačno za svaki element i oni nemaju međusobne veze.

Dalje, koristićemo jedinicu em za isti segment koda.

html { font-size: 100% }
div { Font-size: 0.875em; } //this equals to 14px
div>p { font-size: 2em; } // this equals to 28px

U ovom primeru razlika između jedinica px i em je jasna. Relativnost em jedinice je jasna. Samo promenom veličine fonta kontejnera div, možemo videti da se veličina fonta pasusa u skladu s tim ažurira.

Konačno, pomoću rem jedinice.

html { font-size: 100% }
div { Font-size: 1rem; } //this equals to 16px
div>p { font-size: 1.5rem; } // this equals to 24px

Kada koristite rem jedinicu, jasno je da su sve veličine fontova povezane sa osnovnom veličinom fonta . Veličine fontova div i pasusa povezane su sa korenom, uprkos tome što je div nadređeni deo pasusa.

Zaključak

Ne postoje ispravne ili pogrešne jedinice . Sve zavisi od vašeg nivoa veštine, vrste i veličine projekta i ličnih preferencija .

Ako želite da imate potpunu kontrolu nad veličinom fonta, jedinica piksela je za vas. Ako želite malo veću fleksibilnost prilikom manipulisanja veb stranicom, nego što su em ili rem jedinice, najbolji su izbor. U svakom slučaju, najbolji rezultat postići će se kada se jedinice potpuno razumeju.

Nadamo se da je ovaj članak pomogao i da ste danas naučili nešto novo.

Pogledajte druge detaljne članke u vezi sa svojstvima CSS-a kao što je ovaj: CSS pozicije , SASS and LESS Nesting .

Ako želite da saznate više o kodiranju i veb dizajnu, obavezno se pretplatite na naš bilten.