Yazı tipi ailesi
font-family özelliğini ve yedek yazı tiplerini öğrenirsin.
Yazı tipi ailesi
Bir web sayfasındaki metnin yazı tipi (font) görünümünü font-family özelliği belirler. Bir bildirimde yazdığın ad, tarayıcının o metni çizerken kullandığı yazı tipini söyler.
Tek bir yazı tipi yazmak risklidir: ziyaretçinin sisteminde o yazı tipi yoksa tarayıcı varsayılanına düşer. Bu yüzden birden çok ad içeren bir yazı tipi yığını (font stack) yazarsın; tarayıcı soldan sağa ilk bulduğunu kullanır.
Yığının sonuna serif, sans-serif veya monospace gibi genel aile adlarından birini eklersin.
Web-güvenli yazı tipleri
Bazı yazı tipleri neredeyse her cihazda bulunur; bunlara web-güvenli (web-safe) yazı tipleri denir. Arial, Helvetica, Georgia, Times New Roman, Verdana ve Courier New bu gruptadır.
Yine de güvenliği elden bırakmamak için her zaman bir yedek ve en sonda bir genel aile adı eklersin. Örneğin font-family: "Segoe UI", Arial, sans-serif; bildirimi Segoe UI yoksa Arial'e, o da yoksa sans-serif ailesine düşer.
Uygulama Body için yazı tipi ailesini belirle
body seçicisi için bir bildirim bloğu aç. font-family özelliğine özel bir yazı tipi adıyla başlayan, en az bir yedek içeren ve sans-serif genel ailesiyle biten bir yığın ver.
Örnek çözümü göster
body {
font-family: "Segoe UI", Arial, sans-serif;
}Kendini test et
-
Hangi font-family bildirimi özel adla başlayıp yedeklerle güvenli bir yığın kuruyor?
- font-family: serif, sans-serif, monospace;
- font-family: "Segoe UI", Arial, sans-serif;
- font-family: sans-serif;
- font-family: "Segoe UI";
Cevabı göster
font-family: "Segoe UI", Arial, sans-serif; — Doğru. Yığın özel bir adla başlar, benzer yedekler izler ve en sonda genel aile adıyla biter.
-
Yedeği ekle
p { font-family: "Georgia", ____; }Cevabı göster
p { font-family: "Georgia", "Times New Roman", serif; } -
Genel aile adını rolüyle eşleştir
- serif
- Çizgili ayaklı klasik yazı tipi
- sans-serif
- Çizgisiz, modern yazı tipi
- monospace
- Her harfi eşit genişlikte
- cursive
- El yazısı tarzı
-
Hangisi neredeyse her cihazda bulunan web-güvenli bir yazı tipidir?
- Verdana
- Segoe UI
- SF Pro
- Roboto
Cevabı göster
Verdana — Doğru. Verdana Windows, macOS ve Linux'un çoğunda kurulu gelen web-güvenli bir yazı tipidir.