CSS-ს გამოყენება ტექსტის ზომის შესაცვლელადაც შეგვიძლია.
უკვე შეგიძლიათ ნახოთ და შეადაროთ სათაურისა
და აბზაცების ზომა, როგორც ბრაუზერმა უკვე გააკეთა
დეფოლტ სტილით, განსხვავებული ზომა გამოიყენა განსხვავებული ელემენტებისთვის.
აქ არის შინაარსის შრიფტის ზომა
და უფრო დიდი ზომა თითოეული დონის სათაურზე.
ზოგჯერ, ჩვენ ამ ზომების შეცვლაც გვსურს.
და ჩვენ ამის გაკეთებაა CSS-ის `font-size`(შრიფტის ზომა) ფუნქციითაც შეგვიძლია.
მაგალითად:
როგორ გავაკეთოთ მთელი ტექსტი ჩვენს გვერდზე ცოტა მომცრო ზომის?
კარგი, ჩვენ გადავალთ `style` თეგზე,
და დავამატებთ CSS წესს`body`თეგზე.
და შემდეგ, მასში ჩავსვამთ `font-size` ფუნქციას.
ახლა, რა მნიშვნელობა უნდა მივანიჭოთ `font-size`-ს?
რას ვიყენებთ მის გასაზომად?
ეს ნამდვილად კარგი შეკითხვაა.
რადგან აქ სულ მცირე ათი განსხვავებული ერთეოულია,
CSS-ში `font-size`-სთვის.
მოდი დავიწყოთ იმ ერთეულით, რომელიც ადრეც გინახავთ: პიქსელით.
ჩვენ პიქსელებს სურათების ზომების გადასაწყვეტად ვიყენებდით.
და მათ გამოყენებას CSS-შიც განვაგრძობთ.
მოდი ვცადოთ 11 პიქსელი.
ჰაჰ, ყველაფერი დაპატარავდა.
სათაურებიც კი.
რატომ დაპატარავდნენ ისინიც?
ისინი ისევ იგივე პიქსელების ზომის არ უნდა არჩენილიყვნენ,რაც ბრაუზერმა დაადგინა მათთვის?
არა!
რადგან ბრაუზერის დეფოლტ სტილი არ არის განსაზღვრული პიქსელებში.
ისინი განსხვავებული ერთეულითაა განსაზღვრული, რომლებსაც ჩვენ "em"-ს ვუწოდებთ.
და ეს ფარდობითი ერთეულია,
რომელიც სათაურის შრიფტის ზომის მასშტაბს ტექსტის შრიფტის პროპორციულს ხდის.
მოდი გაჩვენებთ, რას ვგულისხმობ.
გადავიდეთ `h2` სტილის წესზე
და დავამატოთ `font-size` ფუნქცია.
ამ დროს, პიქსელებში ფიქრის ნაცვლად, მე ფარდობითად ვფიქრობ.
ტექსტთან შედარებით რამდენჯერ დიდი გვინდა იყოს ``?
იქნებ, ორჯერ დიდი?
ამისთვის, ჩვენ `2em` უნდა ჩავწეროთ.
ახლა ბრაუზერმა უბრალოდ გამოთვალა
შრიფტის ზომა პიქსელებში.
ბრაუზერმა იცის, რომ შინაარსის ზომა არის 11 პიქსელი.
და თქვენ მიუთითეთ რომ `h2` უნდა იყოს ორჯერ უფრო დიდი,
ასე რომ, ახლა ყველა`` 22 პიქსელის სიდიდისაა,
თუ ჩვენ შინაარსის ტექსტს 12 პიქსელდამდ გავზრდით,
მაშინ რა სიდიდის იქნება ``?
ეს მართალია, 24 პიქსელის.
რა მოხდება თუ`h2` შრიფტის ზომას 1.5em -მდე შევცვლით?
ახლა `h2` იქნება 12 ჯერ 1.5
ანუ 18 პიქსელი ზომის.
ჩვენ პიქსელების ზომის მითითება `h2`სთვისაც შეგვიძლია, ისე როგორც `body`სთვის ვაკეთებდით,
და იგივენაირად იმუშავებს.
არჩევანი იმაზეა დამოკიდებული, რომელი უფრო გეადვილებათ.
და როგორც უკვე ვთქვი, აქ ბევრი ერთეულის გამოყენება შეგვიძლია
pixel-ებისა და em-ის გარდა.
ეს უბრალოდ ორი ყველაზე პოპულარული ერთეულია.
მაგრამ, თუ თქვენ სხვების არჩევა გსურთ,
შეამოწმეთ `font-size`-ს მონაცემები
ან მოძებნეთ ინტერნეტში ტუტორიალები.
შრიფტის ზომის გამოყენების დროა!