CSS Eğitimi

CSS ANA SAYFA CSS'ye Giriş CSS Sözdizimi CSS Seçiciler CSS Nasıl Yapılır CSS Yorumları CSS Renkleri CSS Arka Planları CSS Kenarlıkları CSS Marjları CSS Dolgusu CSS Yüksekliği/Genişliği CSS Kutu Modeli CSS Anahattı CSS Metni CSS Yazı Tipleri CSS Simgeleri CSS Bağlantıları CSS Listeleri CSS Tabloları CSS Ekranı CSS Maksimum genişliği CSS Konumu CSS Z-endeksi CSS Taşması CSS Kayan Noktası CSS Satır içi blok CSS Hizalama CSS Birleştiriciler CSS Sözde sınıfı CSS Sözde öğesi CSS Opaklığı CSS Gezinme Çubuğu CSS Açılır Listeleri CSS Resim Galerisi CSS Görüntü Sprite'ları CSS Attr Seçiciler CSS Formları CSS Sayaçları CSS Web Sitesi Düzeni CSS Birimleri CSS Özgüllüğü CSS !önemli CSS Matematik Fonksiyonları

Gelişmiş CSS

CSS Yuvarlak Köşeler CSS Kenarlık Resimleri CSS Arka Planları CSS Renkleri CSS Renk Anahtar Kelimeleri CSS Gradyanları CSS Gölgeleri CSS Metin Efektleri CSS Web Yazı Tipleri CSS 2D Dönüşümleri CSS 3D Dönüşümleri CSS Geçişleri CSS Animasyonları CSS Araç İpuçları CSS Stili Görüntüleri CSS Görüntü Yansıması CSS nesne uyumu CSS nesne konumu CSS Maskeleme CSS Düğmeleri CSS Sayfalandırma CSS Çoklu Sütunları CSS Kullanıcı Arayüzü CSS Değişkenleri CSS Kutu Boyutlandırma CSS Medya Sorguları CSS MQ Örnekleri CSS Esnek Kutusu

CSS Duyarlı

RWD Tanıtımı RWD Görünümü RWD Izgara Görünümü RWD Medya Sorguları RWD Görüntüleri RWD Videoları RWD Çerçeveleri RWD Şablonları

CSS Izgarası

Izgara Girişi Izgara Konteyner Izgara Öğesi

CSS SASS'ı

SASS Eğitimi

CSS Örnekleri

CSS Şablonları CSS Örnekleri css sınavı CSS Alıştırmaları CSS Sertifikası

CSS Referansları

CSS Referansı CSS Seçiciler CSS Fonksiyonları CSS Referansı Sesli CSS Web Güvenli Yazı Tipleri CSS Canlandırılabilir CSS Birimleri CSS PX-EM Dönüştürücü CSS Renkleri CSS Renk Değerleri CSS Varsayılan Değerleri CSS Tarayıcı Desteği

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:

  1. Serif yazı tiplerinde her harfin kenarlarında küçük bir çizgi bulunur. Bir formalite ve zarafet duygusu yaratırlar.
  2. Sans-serif yazı tiplerinde temiz çizgiler vardır (küçük vuruşlar eklenmez). Modern ve minimalist bir görünüm yaratırlar.
  3. Tek aralıklı yazı tipleri - burada tüm harfler aynı sabit genişliğe sahiptir. Mekanik bir görünüm yaratırlar. 
  4. El yazısı fontları insan el yazısını taklit eder.
  5. 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

serifler vs.  Sans Serif

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