CSS Dersleri 14 - Font Kullanımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Font Özellikleri konusunu öğreneceğiz.

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.

Genel Font Aileleri

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-variant 

CSS'de "font-variant" özelliği, bir metnin küçük harfli bir fontta görüntülenip görüntülenmeyeceğini belirtir.Küçük harfli yazı tipinde, tüm küçük harfler büyük harflere dönüştürülür. Ancak dönüştürülen büyük harfler, metindeki orijinal büyük harflerden daha küçük bir yazı tipi boyutunda görünür.

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

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.

Pixel ile Boyutlandırma 

Metin boyutunu piksellerle ayarlamak size metin boyutu üzerinde tam kontrol sağlar:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Em ile Boyutlandırma

Metin boyunu em ile ayarlamak, varsayılan fontun üzerinden bir boyutlandırma yapmayı sağlar.1em, mevcut yazı tipi boyutuna eşittir. Tarayıcılarda varsayılan metin boyutu 16 pikseldir. Yani, 1em'in varsayılan boyutu 16 pikseldir.

Metin boyutu,  piksel / 16 = em formülü ile hesaplanabilir.

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Yukarıdaki örnekte, em içindeki metin boyutu, piksel cinsinden önceki örnekle aynıdır. Ancak em boyutu ile tüm tarayıcılarda metin boyutunu ayarlamak mümkündür.

Yüzdelik ve Em Kombinasyonu

Tüm tarayıcılarda çalışan sorunsuz çalışması için, body etiketi için yüzde cinsinden varsayılan bir yazı tipi boyutu ayarlamaktır:

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

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;
}