CSS Font-Family Özelliği ile bir dizi Yazı Tipi Ailesi Belirtme

Yazı Tipi-Aile Özelliğinin Sözdizimi

Tipografik tasarım başarılı bir web sitesi tasarımının kritik öneme sahip bir parçasıdır. Okunması kolay ve harika görünen metin siteleri oluşturmak, her web tasarım profesyonelinin hedefleridir. Bunu başarmak için, web sayfalarınızda kullanmak istediğiniz belirli yazı tiplerini ayarlayabilmeniz gerekir. Web belgelerinizde yazı tipi veya yazı tipi ailesi belirtmek için CSS'nizdeki font-family stili özelliğini kullanacaksınız.

Kullanabileceğiniz en basit font-aile stili, yalnızca bir font ailesini içerir:

p {font-family: Arial; }

Bu stili bir sayfaya uyguladıysanız, tüm paragraflar "Arial" font ailesinde görüntülenir. Bu harika ve "Arial" bir "web-güvenli yazı tipi" olarak bilinir, yani (eğer olmasa bile) bilgisayarın çoğunun yüklü olduğu anlamına gelir, sayfanızın istediğiniz yazı tipinde görüntüleneceğini kolayca anlayabilirsiniz. .

Peki seçtiğiniz yazı tipi bulunamazsa ne olur? Örneğin, bir sayfada "web güvenli yazı tipi" kullanmıyorsanız, kullanıcı yazı tipi yoksa kullanıcı aracısı ne yapar? Bir ikame yaparlar.

Bu bazı çok komik görünümlü sayfalara neden olabilir. Bilgisayarımın geliştiricinin belirttiği fontu olmadığı için bilgisayarımın tamamen "Wingdings" (bir simge seti) içinde görüntülendiği bir sayfaya gittim ve tarayıcımın ne yazı tipinde çok kötü bir seçim yaptığını görünce bir yedek olarak kullanın. Sayfa benim için tamamen okunamazdı! Yazı tipi yığını devreye giriyor.

Yazı Tipi Yığında Virgülle Birden Fazla Yazı Tipi Ailesi Ayrı Ayrı

"Yazı tipi yığını" sayfanızın kullanmasını istediğiniz yazı tiplerinin listesidir. Yazı tipi tercihlerinizi tercihinize göre sıralayın ve her birini bir virgülle ayırın. Tarayıcı listede ilk font ailesine sahip değilse, sistemde bir tane buluncaya kadar ikinciyi ve sonra üçüncüsünü deneyecek.

yazı tipi-aile: Pussycat, Cezayir, Broadway;

Yukarıdaki örnekte, tarayıcı önce "Pussycat" yazı tipini, sonra "Algerian" ı ve sonra diğer yazı tiplerinin hiçbiri bulunmadığında "Broadway" ı arar. Bu, seçtiğiniz yazı tiplerinden en az birinin kullanılma şansı verir. Mükemmel değil, bu yüzden yazı dizgemize daha fazla ekleyebiliyoruz (okumaya devam!).

Genel Yazı Tiplerini Kullan

Böylece yazı tipi listesiyle yazı tipi yığını oluşturabilir ve yine de hiçbiri tarayıcının bulamayacağı bir yere sahip olamazsınız. Tarayıcınızın zayıf bir ikame seçeneği seçmesi durumunda sayfanızın okunamaz halde görünmesini istemezsiniz. Neyse ki CSS de bunun için bir çözüm var: genel yazı tipleri .

Yazı tipi listenizi, genel bir yazı tipiyle (bir ailenin listesi veya yalnızca web güvenli fontları olsa bile) sonlandırmalısınız. Kullanabileceğiniz beş tane var:

Yukarıdaki iki örnek şu şekilde değiştirilebilir:

yazı tipi ailesi: Arial, sans-serif; yazı tipi-aile: Pussycat, Cezayir, Broadway, fantezi;

Bazı Yazı Tipi Aile İsimleri İki veya Daha Fazla Kelime

Kullanmak istediğiniz yazı tipi ailesi birden fazla sözcükse, çift tırnak işaretleri ile çevrelemeniz gerekir. Bazı tarayıcılar tırnak işareti olmadan yazı tipi ailelerini okuyabilirken, boşluklar yoğunlaşır veya yok sayılırsa sorunlar yaşanabilir.

font-aile: "Times New Roman", serif;

Bu örnekte, çok kelimeli olan "Times New Roman" yazı tipi isminin tırnak içine alındığını görebilirsiniz. Bu, tarayıcıya, bu sözcüklerin üçünün hepsinin, tek kelimelik isimlerle üç farklı yazı tipinin tersine, bu yazı tipi adının bir parçası olduğunu söyler.

Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 12/2/16 tarihinde düzenlendi