Postoji mnogo načina za prilagodbu veličine CSS fonta. Značajan dio rukovatelja još uvijek koristi piksele, ali to nije pravi pristup. Piksel je vrlo jednostavna opcija koja nije uvijek prikladna za prilagođavanje izgleda stranica. Razmotrite sve postojeće metode za promjenu veličine fonta CSS-a.

Što je uopće ta "veličina fonta"?

Vjeruje se da se veličina odnosi na vrijednost najvećeg znaka navedenog fonta. To nije istina. U stvari, vrijednost je ugrađena u font, a za mjerenje ručno, s ravnalo, vjerojatno neće ispasti. Tipično, veličina je nešto veća od udaljenosti od gornjeg dijela velikog slova do donjeg dijela najmanjeg. To je učinjeno kako bi se omogućilo bilo koja kombinacija znakova da stane u zadani prostor. Također je važno odrediti parametar "line-height", inače slova p, q i slično mogu ići izvan granica.

Pikseli

Najčešća verzija. Instalira se na sljedeći način: veličina fonta: 16px; Prednost piksela je samo jedna stvar - bez poteškoća s veličinom. Ništa za računati. Koja je veličina označena, bit će znakovi na zaslonu. Nedostatak je poteškoća s prilagodljivom veličinom fonta CSS. Neće biti moguće uspostaviti vezu između različitih veličina. Među "pikselima" mogu se pripisati zastarjele mjerne jedinice. To uključuje pc, cm, mm i pt. Da, mm je milimetar, cm je centimetar. Pt i pc - tipografska točka i tipografski vrh. Zašto su ove metode zastarjele? Zato što nisu bili "neovisni" - preglednikAutomatski broje vrijednosti u pikselima. Prema tome, problemi su bili isti kao u slučaju px. Usput, u jednom cm sa stajališta preglednika sadrži 38px.

Vrijednost Em: ovisi o veličini fonta roditeljskog elementa

Sve je jednostavno. Pretpostavimo da imate div, za koji je određena veličina fonta 16px. U njemu je još jedan div, za koji je veličina fonta CSS postavljena na 2em. Prema tome, 1em - bit će 16px (to jest, veličina fonta roditeljskog elementa), a 2em - dva puta, odnosno 32px.

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

Za profesionalce: ex i ch

Praktično se ne koriste obični rukovatelji i front-developeri. Ex je vrijednost znaka "X", a ch je znak "0". Odabrani font možda nema takve znakove, ali se opcije još uvijek mogu koristiti. Svakako nije poznato za koje slučajeve su takve dimenzije najprikladnije. Pokušajte eksperimentirati - možda će vam biti bolje? Međutim, zapamtite da su ex i ch "uvjetne" jedinice, tako da će fino podešavanje parametara biti teško.

Postotak: najneophodnija opcija

Kako postaviti veličinu fonta u CSS-u kao postotak? Čini se da je sve jednostavno - samo trebate odrediti željenu opciju i staviti simbol "%" nakon njega. Ali ovdje jepojavljuje se važno pitanje: "Koliki će se postotak dati?"
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 linije, postotak će se uzeti ovisno o trenutnoj veličini fonta. Postavljanje parametara u postocima zahtijeva pažljive pokuse. Budite oprezni s ovom jedinicom jer ona lako može promijeniti izgled vašeg izgleda.

Rem: Jednostavna i univerzalna jedinica

Iznad je popis mnogih načina za prilagodbu veličine fonta u CSS-u, ali nijedan od njih nije prikladan. Radi pojednostavljenja rada, izračunat je parametar rem, koji se izračunava ovisno o veličini oznake koja je određena za html. To je lakše nego na prvi pogled. Na primjer, za html oznaku koja je omotala cijeli sadržaj stranice, postavite je u veličinu fonta CSS 16px. Prema tome, 1rem će sada biti 16px. 2rem je 32px, itd. Možete koristiti bilo koji omjer slike: 02 rem, 11 rem, 100rem Preglednik će točno popisati parametre.

U html-u ne možete ništa dirati, jer sami preglednici postavljaju određenu veličinu fonta za omot. Ali za pažljivije postavljanje najbolje je redefinirati rezultat. Glavna prednost rem-a je u tome što možete lako skalirati fontove na određeno mjesto bez utjecaja na druge elemente. Međutim, imajte na umu da stariji IE preglednici ispod verzije 9) ne podržavaju ovu mjernu vrijednost.

Vw i vh: egzotični parametri

Najnovije jedinicemjerenja napravljena za mobilne uređaje. Vw je 1% širine prozora na kojem korisnik pregledava vašu web-lokaciju. Vh - 1% visine. Vrijednosti znakova automatski će se prilagoditi ovisno o zaslonu posjetitelja. Da biste odabrali odgovarajuću veličinu prilikom izgleda, povećajte i smanjite veličinu zaslona.

Sažetak

Prošlo je mnogo vremena budući da ne možete postaviti veličinu CSS fontova samo preko px. Mnogo je prikladnije koristiti rem, vh i vw (posebno za adaptivni dizajn) kao i em. Svaka od ovih opcija ima svoje prednosti i nedostatke, stoga prije korištenja provjerite nekoliko metoda. Moderni vodiči često pribjegavaju remu jer je to jedan od najlakših načina za promjenu veličine fonta. Međutim, to ima nedostatak - komponente postaju manje modularne. Preporučuje se pridržavanje 2 pravila:

ako će se svojstva prilagoditi veličini fonta, em će biti preferirani izbor;

U drugim slučajevima preporučuje se primjena rem.

Em se često koristi za podešavanje veličine obloge i margina. Budite oprezni ako u njemu navedete vrijednost znakova za popise, jer zbog velikih ograđenih prostora znakovi mogu biti izobličeni.