CSS Yazı Tipleri
Web siteniz için doğru yazı tipini seçmek önemlidir!
Yazı Tipi Seçimi Önemlidir
Doğru yazı tipini seçmenin, okuyucuların bir web sitesini nasıl deneyimlediği üzerinde büyük etkisi vardır.
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 renk ve metin boyutunu seçmek de önemlidir.
Genel Yazı Tipi Aileleri
CSS'de beş genel yazı tipi ailesi vardır:
- Serif yazı tiplerinde her harfin kenarlarında küçük bir çizgi bulunur. Bir formalite ve zarafet duygusu yaratırlar.
- Sans-serif yazı tiplerinde temiz çizgiler vardır (küçük vuruşlar eklenmez). Modern ve minimalist bir görünüm yaratırlar.
- Tek aralıklı yazı tipleri - burada tüm harfler aynı sabit genişliğe sahiptir. Mekanik bir görünüm yaratırlar.
- El yazısı fontları insan el yazısını taklit eder.
- Fantezi yazı tipleri dekoratif/eğlenceli yazı tipleridir.
Tüm farklı yazı tipi adları, genel yazı tipi ailelerinden birine aittir.
Serif ve Sans-serif Yazı Tipleri Arasındaki Fark
Not: Bilgisayar ekranlarında sans-serif yazı tiplerinin okunması, serif yazı tiplerine göre daha kolay kabul edilir.
Bazı Yazı Tipi Örnekleri
Generic Font Family | Examples of Font Names |
---|---|
Serif | Times New Roman Georgia Garamond |
Sans-serif | Arial Verdana Helvetica |
Monospace | Courier New Lucida Console Monaco |
Cursive | Brush Script MT Lucida Handwriting |
Fantasy | Copperplate Papyrus |
CSS yazı tipi ailesi Özelliği
CSS'de, font-family
bir metnin yazı tipini belirtmek için özelliği kullanırız.
Not : Yazı tipi adı birden fazla kelimeyse, "Times New Roman" gibi tırnak işaretleri içinde olmalıdır.
İpucu: Tarayıcılar font-family
/işletim sistemleri arasında maksimum uyumluluğu sağlamak için özellik, bir "yedek" sistem olarak birkaç yazı tipi adını tutmalıdır. İstediğiniz yazı tipiyle başlayın ve genel bir aile ile bitirin (başka yazı tipi yoksa tarayıcının genel ailede benzer bir yazı tipi seçmesine izin vermek için). Yazı tipi adları virgülle ayrılmalıdır. Sonraki bölümde yedek yazı tipleri hakkında daha fazla bilgi edinin .
Örnek
Üç paragraf için bazı farklı yazı tiplerini belirtin:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}