CSS Yazı Tipleri
Metnin satırda nasıl oturduğunu biliyorsunuz. Yazı tipleri hangi harfleri göreceğinizi seçer — yazı tipi ailesi, boyut, kalınlık ve italic eğim. Özel web yazı tipi yükleme sonraki derste; burada temel yazı tipi özelliklerini pekiştirirsiniz.
Bir bakışta yazı tipi araçları
📊 Yaygın yazı tipi özellikleri
| Özellik | Günlük işi |
|---|---|
font-family |
Yazı tipi yığınını adlandırır (artı genel fallback) |
font-size |
Metnin ne kadar büyük olduğunu ayarlar |
font-weight |
Ne kadar kalın olduğunu ayarlar (örn. 400, 700, bold) |
font-style |
normal veya italic (ve ilgili stiller) ayarlar |
font (kısayol) |
Stil, ağırlık, boyut ve aileyi tek bildirimde birleştirir |
Font-family yığınları
Önce tercih edilen yazı tiplerini, sonra daha güvenli alternatifleri yazın ve genel bir aile ile bitirin — sans-serif veya serif gibi — ki her zaman bir şey çizilsin.
Okunaklı sans-serif yığını
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}Yazı boyutu
font-size metin boyutunu ayarlar. rem gibi göreli birimler çoğu zaman sayfayla sakin ölçeklenir; px ve large gibi anahtar sözcükler de çalışır.
Başlık ve gövde boyutları
cssh1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}Yazı ağırlığı
font-weight kalınlığı kontrol eder. Sayısal ağırlıklar (400, 700) veya anahtar sözcükler (normal, bold) yaygındır. Yüzün istediğiniz ağırlığı desteklemesi gerekir.
Ağırlıkla vurgu
css.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}Yazı stili — italic
font-style: italic, italic yüz varsa metni yatırır. Alıntılar veya yumuşak vurgu için kullanın; her paragraf için değil.
İtalik alıntı
cssblockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}Font kısayolu
font kısayolu stil, ağırlık, boyut ve aileyi birlikte ayarlayabilir. Çoğu tarayıcının beklediği biçimde boyut ve aile zorunludur.
Kart başlığında font kısayolu
css.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}Gövde için sakin alışkanlık
Sayfa için net bir yığın, başlıklar için biraz daha güçlü ağırlık veya boyut, ve okuması kolay gövde metni seçin.
Sayfa yazı tipi tabanı
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}Kendiniz deneyin
body’yesans-serifile biten bir sans-serif yığını verin.h1’e daha büyükfont-sizevefont-weight: 700verin.- Bir
blockquote’ufont-style: italicve serif yığınıyla stillendirin. - Bir başlığı
fontkısayoluyla yeniden yazın. - Aynı paragrafı serif ile sans-serif’te karşılaştırın — ruh hali değişimini görün.
Sık hatalar
- Fallback olmadan tek fancy isim (yüz yoksa görünüm bozulur)
- Her yere göreli düşünmeden kocaman sabit
px - Yüz yalnızca regular ve bold sunarken
font-weight: 900istemek - Burada
@font-face/ barındırılan web yazı tiplerine atlamak (sonraki ders) - font-family veya font-weight isterken text-align veya text-decoration kullanmak
Özet
font-familybir yığın listeler ve genel bir aileyle bitmelidirfont-sizeboyutu ayarlar; göreli birimler çoğu zaman sakin ölçeklenirfont-weightvefont-stylekalın ve italik vurgu verirfontkısayolu stil, ağırlık, boyut ve aileyi paketler- Net bir gövde yığını tutun; özel web yazı tipi yükleme sonraki derste
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek