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.

Sıradaki ders: Yazı tipi boyutu ve kalınlığı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler