CSS'de Font Kullanımı

Doğru font seçmek, okuyucuların bir web sitesini nasıl deneyimledikleri üzerinde büyük bir etkiye sahiptir. Doğru yazı tipi, markanız için güçlü bir kimlik oluşturabilir. Okunması kolay bir yazı tipi kullanmak önemlidir. Yazı tipi, metninize değer katar. Yazı tipi için doğru rengi ve metin boyutunu seçmek de önemlidir.

CSS'de beş genel yazı tipi ailesi vardır:

• Serif yazı tiplerinin her harfin kenarlarında küçük bir kontur vardır. Bir formalite ve zarafet duygusu yaratırlar.
• Sans-serif yazı tiplerinin temiz satırları vardır (küçük konturlar eklenmez). Modern ve minimalist bir görünüm yaratırlar.
• Monospace yazı tipleri - burada tüm harfler aynı sabit genişliğe sahiptir. Mekanik bir görünüm yaratırlar.
• Cursive yazı tipleri insan el yazısını taklit eder.
• Fantasy yazı tipleri dekoratif / eğlenceli yazı tipleridir.

Tüm farklı yazı tipi adları, genel yazı tipi ailelerinden birine aittir.

# font-family : Yazı Tipi Belirleme

CSS'de, bir metnin yazı tipini belirtmek için font-family özelliğini kullanırız. Font-family özelliği kullanırken farklı tarayıcı ve işletim sistemleri arasında en iyi uyumluluğu sağlamak için "fallback" adı verilen bir yapı ile yazı tipleri tanıtılır. İstediğiniz yazı tipiyle başlayın ve genel bir aile ile bitirin (başka yazı tipi yoksa tarayıcının genel aileden benzer bir yazı tipi seçmesine izin vermek için). Yazı tipi adları virgülle ayrılmalıdır.

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Web Uyumlu Yazı Tipleri
Web uyumlu yazı tipleri, evrensel olarak tüm tarayıcılara ve cihazlara yüklenen yazı tipleridir.Ancak,% 100 tamamen web uyumlu yazı tipleri yoktur. Her zaman bir yazı tipinin bulunmaması veya düzgün yüklenmemesi ihtimali vardır.Bu nedenle, her zaman yedek yazı tiplerini kullanmak çok önemlidir ve "fallback" denilen bir yapı kullanılır.

Fallback Yazı Tipleri
CSS'de "fallback" yapısı, font-family özelliğine benzer "yedek fontların" bir listesini eklemeniz gerektiği anlamına gelir. İlk yazı tipi çalışmazsa, tarayıcı bir sonrakini ve bir sonrakini dener ve bu böyle devam eder. Listeyi her zaman genel bir yazı tipi ailesi adıyla sonlandırın.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Burada üç yazı tipi türü vardır: Tahoma, Verdana ve sans-serif. İkinci ve üçüncü yazı tipleri, birincisinin bulunamaması durumunda yedeklemedir.

# font-style : Yazı Stili

CSS'de font-style özelliği, çoğunlukla italik metni belirtmek için kullanılır.Bu özelliğin üç değeri vardır:

• normal - Metnin normal gözükmesi
• italic - Metnin italik yani yatık gözükmesi
• oblique - italik özelliği bulunmayan fontlara uygulanır.

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

# font-weight : Yazı Kalınlığı

CSS'de font-weight özelliği, yazı tipinin kalınlığını belirlir.

p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}

# font-size : Yazı Boyutu

CSS font-size özelliği, metnin boyutunu ayarlar.Yazı tipi boyutu mutlak veya göreceli bir boyut olabilir. Bir yazı boyutu berlitmediğimizde varsayılan olarak 16px büyüklüğündedir.

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

# Duyarlı Metin Boyutu (Responsive Font Size) 

Metin boyutu, "vievport width" görüntü alanı boyutu anlamına gelen bir vw birimi ile ayarlanabilir.Bu şekilde metin boyutu, tarayıcı boyutuna uyacaktır. Viewport, tarayıcı pencere boyutudur. 1vw = görüntü alanı genişliğinin% 1'i. Görüntü alanı 50 cm genişliğinde ise 1vw 0,5 cm'dir.

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

# CSS Font Kısa Kullanımı

CSS'de font özelliklerinin hepsini tek bir özellik ile kısa kullanım mevcuttur. Font özelliği, aşağıdakile özelliker için kısa kullanımı vardır :

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Not : Kısa kullanımda, "font-size" ve "font-family" özellikleri gereklidir. Diğer özellikler yazılmaz ise varsayılan değerli kullanılır.

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}