Veličina fonta CSS

Postoji mnogo načina za prilagodbu veličine fonta CSS-a. Značajan dio web dizajnera još uvijek koristi piksele, ali to nije pravi pristup. Pixel je prejednostavna opcija koja nije uvijek prikladna za izgled odgovarajućih stranica. Razmotrite sve postojeće metode za promjenu veličine CSS fonta.

Što je to "veličina fonta"?

Postoji mišljenje da veličina znači veličinu najvećeg znaka navedenog fonta. Nije. U stvari, vrijednost je ugrađena u font, a malo je vjerojatno da će moći mjeriti ručno pomoću ravnala. Obično je veličina nešto veća od udaljenosti od vrha najvećeg slova do dna najmanjeg. To je učinjeno kako bi odgovaralo bilo kojoj kombinaciji znakova u danom prostoru. Također je važno specificirati parametar "line-height", inače slova p, q i slično mogu ići dalje.

piksela

Najčešća opcija. Instalirano na sljedeći način:

veličina fonta: 16px;

Prednost piksela je samo jedna - nema poteškoća s vrijednošću. Ništa za računati. Koja je veličina navedena, a to će biti znakovi na zaslonu. Nedostatak je poteškoća s velikom veličinom fonta CSS-a. Neće biti moguće uspostaviti omjere između različitih veličina.

Broj "piksela" može se pripisati zastarjelim jedinicama. To uključuje pc, cm, mm i pt. Dakle, mm je milimetar, cm je centimetar. Pt i pc - vrh tipografije i tipografije. Zašto su ove metode zastarjele? Budući da nisu bili “neovisni” - preglednik je automatski ponovno izračunao vrijednosti u pikselima. Prema tome, problemi su bili isti kao kod px. Usput, u jednom cm sa stajališta preglednika sadrži 38px.

Vrijednost Em: ovisi o veličini fonta roditeljskog elementa

Jednostavno je. Pretpostavimo da imate div za koji je veličina fonta postavljena na 16px. Sadrži još jedan div za koji je veličina fonta CSS postavljena na 2em. Prema tome, 1em će biti 16px (tj. Veličina fonta roditeljskog elementa), a 2em će biti dvostruko veći, tj. 32px.

U nadređenom elementu možete postaviti vrijednost u em. U ovom slučaju, to će ovisiti o osnovnoj veličini navedenoj u tijelu ili html. Em je relativna veličina CSS fonta koji će se povećavati i smanjivati ​​s veličinom znakova roditeljskog elementa. To je prikladno - za promjenu vrijednosti na velikom broju mjesta, samo trebate promijeniti parametre roditelja.

Za profesionalce: ex i ch

Praktički ne koriste uobičajeni dizajneri i frontend-programeri. Ex je vrijednost simbola "X", a ch je simbol "0". U odabranom fontu možda nema takvih znakova, ali se parametri i dalje mogu koristiti. Nije poznato za određene slučajeve za koje su takve dimenzije najprikladnije. Pokušajte eksperimentirati - možda će vam biti prikladnije? Međutim, zapamtite da su ex i ch "uvjetne" jedinice, tako da će fino podešavanje parametara biti teško.

Interes: najneobičnija opcija

Kako postaviti veličinu fonta u CSS-u kao postotak? Čini se da je sve jednostavno - samo trebate odrediti željeni parametar i nakon njega staviti simbol "%". Ali ovdje dolazi važno pitanje: "Koji će biti postotak dane veličine?"

U većini slučajeva, parametar se izračunava ovisno o veličini roditelja, ali ne uvijek. Ako postavite svojstvo margin-left, postotak će se izračunati ovisno o širini roditeljskog bloka. Ako postavite visinu retka, postotak će se uzeti ovisno o trenutnoj veličini fonta.

Postavljanje parametara kao postotak zahtijeva pažljivo eksperimentiranje. Budite oprezni s ovom jedinicom mjere, jer ona lako može promijeniti izgled vašeg slaganja sloga.

Rem: jednostavna i svestrana jedinica

Navedeno je mnogo načina za prilagodbu veličine fontova u CSS-u, ali nijedna od njih nije stvarno prikladna. Kako bi se pojednostavio rad, izmijenjen je parametar rem, koji se izračunava ovisno o vrijednosti navedenoj za html oznaku.

To je lakše nego što se čini na prvi pogled. Na primjer, za HTML oznaku, u kojoj je sav sadržaj stranice omotan, postavite veličinu fonta CSS 16px. Prema tome, 1rem će sada biti 16px. 2rem je 32px, itd. Bilo koji razmjeri mogu se koristiti: 0.2rem, 1.1rem, 100rem ... Preglednik će pažljivo izračunati parametre.

U html-u ne možete ništa dirati, jer sami preglednici postavljaju određenu veličinu fonta za omot. Ali za temeljitije podešavanje bolje je redefinirati pokazatelj. Glavna prednost rem-a je u tome što možete lako skalirati fontove na određenom mjestu bez utjecaja na druge elemente. Međutim, imajte na umu da stariji preglednici (IE ispod verzije 9) ne podržavaju ovaj pokazatelj.

Vw i vh: egzotične opcije

Najnovije mjerne jedinice stvorene za mobilne uređaje. Vw je 1% širine prozora na kojem korisnik pregledava vašu web-lokaciju. Vh - 1% visine. Veličina znakova automatski će se povećati ovisno o zaslonu uređaja posjetitelja. Za odabir odgovarajuće veličine tijekom izgleda povećajte ili smanjite veličinu zaslona.

Ukratko

Već dugo nije moguće postaviti veličinu CSS fontova samo u px. Mnogo je prikladnije koristiti rem, vh i vw (pogotovo s prilagodljivim dizajnom), kao i em. Svaka od ovih opcija ima svoje prednosti i nedostatke, stoga prije uporabe provjerite nekoliko metoda. Moderni web dizajneri često koriste rem jer je to jedan od najlakših načina za promjenu veličine fonta. Međutim, to ima nedostatak - komponente postaju manje modularne.

Preporuča se slijediti 2 pravila:

• ako je potrebno skalirati svojstva u odnosu na veličinu fonta, em je najbolji izbor;
• u drugim slučajevima preporuča se rem.

Em se često koristi za podešavanje veličine obloge i margina. Budite oprezni ako u njemu navedete veličinu znakova za popise, budući da zbog velikog gniježđenja, znakovi mogu biti nečitljivi.