Velikosti pisav CSS

Velikost pisave CSS lahko prilagodite na več načinov. Znaten del spletnih oblikovalcev še vedno uporablja slikovne pike, vendar to ni pravi pristop. Pixel je preveč preprosta možnost, ki ni vedno primerna za postavitev odzivnih strani. Upoštevajte vse obstoječe metode za spreminjanje velikosti pisave CSS.

Kaj je ta "velikost pisave"?

Obstaja mnenje, da velikost pomeni velikost največjega znaka določene pisave. To ni. Dejansko je vrednost vgrajena v pisavo in je malo verjetno, da bi jo lahko ročno izmerili z ravnilom. Običajno je velikost nekoliko večja od razdalje od vrha največje črke do dna najmanjšega. To se izvede, da se v danem prostoru prilega katera koli kombinacija znakov. Pomembno je tudi, da podate parameter „line-height“, sicer lahko črke p, q in podobno presegajo.

Pixels

Najpogostejša možnost. Nameščeno na naslednji način:

velikost pisave: 16px;

Prednost pikslov je le ena - brez težav pri vrednosti. Nič ne šteje. Kakšna velikost je določena, in to bodo znaki na zaslonu. Pomanjkljivost je težava z odzivno velikostjo pisave CSS. Razmerja med različnimi velikostmi ne bo mogoče določiti.

Število "pikslov" lahko pripišemo zastarelim enotam. Sem spadajo pc, cm, mm in pt. Torej, mm je milimeter, cm je centimeter. Pt in pc - vrh tipografije in tipografije. Zakaj so te metode zastarele? Ker niso bili »neodvisni« - je brskalnik samodejno preračunal vrednosti v slikovnih pikah. Zato so bile težave enake kot pri px. Mimogrede, v enem cm z vidika brskalnika vsebuje 38px.

Vrednost Em: je odvisna od velikosti pisave nadrejenega elementa

Preprosto je. Recimo, da imate div, za katerega je velikost pisave nastavljena na 16 px. Vsebuje še en div, za katerega je velikost pisave CSS nastavljena na 2em. V skladu s tem bo 1em 16px (tj. Velikost pisave nadrejenega elementa), 2em pa bo dvakrat večji, tj 32px.

V nadrejenem elementu lahko nastavite tudi vrednost v em. V tem primeru bo odvisno od osnovne velikosti, ki je določena v telesu ali html. Em je relativna velikost pisave CSS, ki se bo povečala in zmanjšala z velikostjo znakov starševskega elementa. To je priročno - če želite spremeniti vrednost na številnih mestih, morate spremeniti parametre staršev.

Za strokovnjake: ex in ch

Praktično ne uporabljajo običajni oblikovalci in front-razvijalci. Ex je vrednost simbola "X", ch pa je simbol "0". V izbrani pisavi morda ni takih znakov, vendar se lahko parametri še vedno uporabljajo. Za nekatere primere, za katere so takšne dimenzije najprimernejše, ni znano. Poskusite eksperimentirati - morda vam bo bolj primerna? Vendar ne pozabite, da sta ex in ch »pogojne« enote, zato bo fino nastavljanje parametrov težko.

Obresti: najbolj zmedena možnost

Kako določiti velikost pisave v CSS kot odstotek? Zdi se, da je vse preprosto - določiti morate samo želeni parameter in po njem označiti simbol "%". Ampak tukaj prihaja pomembno vprašanje: "Kakšen bo odstotek dane velikosti?"

V večini primerov se parameter izračuna glede na velikost nadrejenega, vendar ne vedno. Če nastavite lastnost margin left, se odstotek izračuna glede na širino nadrejenega bloka. Če nastavite višino vrstice, se odstotek upošteva glede na trenutno velikost pisave.

Nastavitev parametrov v odstotkih zahteva skrbno eksperimentiranje. Bodite previdni pri tej merski enoti, saj lahko zlahka spremenite videz vašega pisanja.

Rem: enostavna in vsestranska enota

Zgoraj je veliko načinov za prilagajanje velikosti pisav v CSS-ju, vendar nobena od njih ni zelo priročna. Za poenostavitev dela je bil izumljen parameter rem, ki se izračuna glede na vrednost, določeno za oznako html.

To je lažje, kot se zdi na prvi pogled. Na primer, za oznako html, v kateri je celotna vsebina strani ovita, nastavite velikost pisave CSS 16px. V skladu s tem bo 1rem zdaj 16px. 2rem je 32px itd. Uporabite lahko vsa razmerja: 0.2rem, 1.1rem, 100rem ... Brskalnik bo skrbno preračunal parametre.

V html-u se ničesar ne morete dotakniti, saj brskalniki sami določajo določeno velikost pisave za ovoj. Za bolj temeljito prilagoditev pa je bolje, da indikator ponovno opredelimo. Glavna prednost rem je v tem, da lahko pisave enostavno prilagodite na določenem mestu, ne da bi vplivali na druge elemente. Vendar ne pozabite, da starejši brskalniki (IE pod različico 9) ne podpirajo tega indikatorja.

Vw in vh: eksotične možnosti

Najnovejše merilne enote, izdelane za mobilne naprave. Vw je 1% širine okna, v katerem uporabnik gleda vaše spletno mesto. Vh - 1% višine. Velikost znakov se samodejno prilagodi glede na zaslon naprave obiskovalca. Če želite izbrati ustrezno velikost med postavitvijo, povečajte ali zmanjšajte velikost zaslona.

Povzamemo

Že dolgo ni bilo mogoče določiti velikosti pisav CSS samo v px. To je veliko bolj priročno za uporabo rem, vh in vw (še posebej z odzivno zasnovo), kot tudi em. Vsaka od teh možnosti ima svoje prednosti in slabosti, zato pred uporabo preverite več metod. Sodobni spletni oblikovalci pogosto uporabljajo rem, saj je to eden od najlažjih načinov za spreminjanje velikosti pisave. Vendar pa ima pomanjkljivost - komponente postanejo manj modularne.

Priporočljivo je, da upoštevate 2 pravila:

• če je treba lastnosti prilagoditi glede na velikost pisave, je em najboljša izbira;
• v drugih primerih se priporoča popravilo.

Em se pogosto uporablja za nastavitev velikosti oblazinjenja in robov. Bodite previdni, če v njej določite velikost znakov za sezname, saj so lahko zaradi velikega gnezdenja znaki neberljivi.