Css Font Kullanımı Nasıl Yapılır ?

nhtctn nhtctn

Sayfalarımızda sıklıkla kullandığımız font-family, font-size özelliklerinden bahsedeceğim.

font-family

Tüm tarayıcıların kendine özgü kullandığı varsayılan yazı türü bulunmaktadır.Biz kendi sayfamızda font türü belirtmediğimiz sürece tarayıcı varsayılanı olan yazı türü kullanılır.Biz bunu ezerek istediğimiz yazı türünü kullanabilmekteyiz.

Aşağıdaki örnekte p etiketleri için varsayılan yazı tipini ezip kendi istediğimiz font türünü belirledik.Aşağıya 3 adet yazı türü belirttim tarayıcı ilkini desteklemediği zaman ikincisi devreye girecektir, aynı şekilde ikincisini desteklenmiyorsa üçüncü devreye girecek hiçbirini desteklemese varsayılan kullanılacaktır.

p{
    font-family: fantasy,serif,monospace;
}

Yukarıda sadece p etiketleri için yazı türünü belirttik sayfamızda bulunan tüm yazıların etkilenmesini istiyorsak bunu body içine almamız gerekecektir.

body{
    font-family: fantasy,serif,monospace;
}

font-size

Adı üstüne yazı büyüklüğü anlamına gelmektedir.

Yine font-family de olduğu gibi tüm tarayıcıların kendine özgü kullandığı varsayılan yazı büyüklüğü bulunmaktadır.Biz kendi sayfamızda font büyüklüğü belirtmediğimiz sürece tarayıcı varsayılanı olan yazı boyutunu kullanılır.Biz bunu ezerek istediğimiz yazı boyutunu kullanabilmekteyiz.

Örneğin chrome tarayıcısının body etiketi için varsayılan yazı büyüklüğü 16px dir.

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, nulla.</p>
</body>
       p {
           font-size: 20px;
        }

Yine aynı şekilde p etiketleri için geçerli yazı büyüklüğü tüm yazı boyutlarının eklenmesini istiyorsak body’e vermemiz gerekiyor.

       body {
           font-size: 20px;
        }

farklı bir örnek inceleyelim

<h1>Tüm kurslarım artık sadikturan.com' da </h1>

<div>
   <h2>
     Komple Uygulamalı Web Geliştirme</h2>
   <p>
     Web Geliştirme adına her konuyu bu kursumda bulabilirsiniz.
  </p>
</div> 
 
body{
  font-size:17px;
}

h1{
  font-size:32px;
}

h2{
  font-size:26px;
}

Örneğimizde font-size için px cinsinden bir değer verdik ancak her zaman px cinsinden sabit bir değer vermek istemeyiz bunun sebebi responsive tasarımlarda tarayıcının genişliğine göre farklı boyutlarda farklı font büyüklükleri kullanmak istememizdendir.

Örneğin <body> seviyesinde varsayılan 16px’ lik font-size değerini 10px’ e getirip sayfadaki tüm etiketlere bu değer üzerinden orantısal olarak değer vermemiz işlerimizi farklı boyutlardaki tarayıcılarda oldukça kolaylaştırır.

Bu zamanda kadar px ile işlem yaptık şimdi ise rem ve em nedir ne işe yarar bunu öğrenelim.

Rem

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.

<body>
	<h1>Lorem ipsum dolor sit amet.</h1>
<div>
   <h2>
     Lorem ipsum dolor sit amet.</h2>
   <p>
   Lorem ipsum dolor sit amet.
  </p>
</div> 
</body>

Burada html 10px verdik; body içerikleri 17 px , h1 içerikleri 32 px , h2 ise 27 px olur.Yani 10/1 oranda değer alır.

html{
  font-size:10px;
}
body{
  font-size:1.7rem;
}
h1{
  font-size:3.2rem;
}
h2{
  font-size:2.7rem;
}

Em

em değeri ise html etiketine göre değilde kendisine en yakın etikete verilen font-size ‘e göre bir ölçeklendirme yapar.

<h1>Lorem ipsum dolor sit amet consectetur. </h1>

<div>
   <h2>
    Lorem ipsum dolor sit amet consectetur. </h2>
   <p>
    Lorem ipsum dolor sit amet consectetur. 
     <span>
      Lorem ipsum dolor sit amet consectetur. 
     </span>
  </p>
</div> 
body{
  font-size:10px;
}

h1{
  font-size:3.2em;
}

h2{
  font-size:2.7em;
}

p {
  font-size:2em;
}

span {
  font-size: .7em;
}

<body> etiketi için 10px’ lik bir değer atadım ve bu değer body altındaki etiketler için önemlidir.

Google Font Kütüphanesi Kullanımı

Google kütüphanesinde bulunanan bir çok font bulunmakta bu kütüphaneyi projemi dahil ederek istediğimiz font’u kullanma imkanına sahibiz.

Site: https://fonts.google.com/

Siteye girdikten sonra istediğiniz yazı fontunu seçtikten sonra size verilecek olan kütüphane linkini projenize dahil ederek kullanabileceksiniz.

Kütüphane linkini aşağıdaki gibi head bölümü arasına eklemelisiniz.

<head>
<link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
</head>
body{
font-family: 'Yellowtail', cursive;
}

Yorum yazın

BENZER YAZILAR