HTML sayfalarında fontlarımızı nasıl yönetiriz ?Boyutunu çeşitliliğini nasıl ayarlarız ? Font size ayarlarımızı yaparken Responsive bir site için ne kadar önemli olduğundan bahsedeceğim.
Kullanılan her tarayıcının kendi default bir font türü vardır.Biz sayfamıza bir font türü eklemesek bile açtığımız tarayıcıyla beraber otomatik bir font family özelliği alır ve öyle görüntülenir.Biz font türü özelliğini kendimiz girerek kullandığımız tarayıcının varsayılan font türünü ezebiliriz.
Burada birden fazla font-family değeri girmemizde ki amaç şu , eğer tarayıcı destekliyorsa “Times New Roman” font tipi çalışır eğer desteklemiyorsa “Times” o da desteklemiyorsa “serif” çalışır.
Belirlediğimiz fontlara boyutunu ayarlamak için font-size özelliğini kullanırız.
Her zaman font boyutlarını px olarak tanımlamayız.Çünkü responsive bir website tanımlarken birden fazla ekranlar(telefon,tablet,bilgisayar) için site tasarlarız.Bilgisayar ekranı için ayrı telefon , tablet için her etikete farklı font boyutu vermek bizim işimizi çok fazla zorlaştırır.Burada yardımımıza em ve rem kavramı koşuyor.
Gelin em ve rem kavramlarına bakalım.
REM
Root etikete yani <html> etiketine vermiş olduğumuz bir font değerini kullanarak diğer tüm etiketler için belli oranda font büyüklüğü kullanmamızı sağlar.
Böylece hepsine farklı değer vermek yerine rem cinsinden değer vermiş olduk.Başka bir ekran için yapmak istediğimizde rem değerlerini orantısal olarak azalttığımızda işimiz kolaylaşacaktır.
EM
Kendisine en yakın etikete verilen font-size ‘e göre bir ölçeklendirme yapar.
Font Çeşitliliğimizi Nasıl Artırabiliriz ?
Yüzlerce fontu kullanabileceğimiz aslında bir font kütüphanesi var.
Bir font kütüphanesini seçelim ve projemize ekleyelim.
Roboto fontunu seçtim ;
Thin 100 Style seçip Select this style seçtim.
Sağ tarafta bizim için bir link rel ve altında font-family kodu oluştu.
Üst taraftaki kodu <head> etiketleri arasına yapıştırdığımızda artık projemizde bu fontu kullanabilir hale geliyoruz.CSS kısmında ise istediğimiz etiket için font-family özelliğini import ettiğimiz font ismini vererek kullanabiliriz.
