Web Fontları Nasıl Kullanılır

Sep 13, 2025
Nasıl Yapılır

Aşağıdakiler, Bram Stein'in WebFont El Kitabından alınan bir alıntıdır. Buradan satın al .

Web yazı tipleri CSS'de tanımlanır @ Font-Face kural. Eğer bir web geliştiricisiyseniz, muhtemelen yazdıysanız, kopyalanmış ve yapıştırdınız mı, yoksa en azından @ Font-Face kural.

Bütünlük uğruna olsa da, temel bir örnekle hızla çalışalım: 

 @ font-face {
  Yazı tipi ailesi: Elena;
  SRC: URL (Elena-Regular.woff);
}

Bu, üzerinden referans verilebilecek yeni bir web yazı tipi ailesi oluşturur. font ailesi veya yazı tipi Shorthand özelliği. Ama burada bir şeyler kaçırıyor. Bir Yazı Tipi Yığını'nda bir Web yazı tipini atıfta bulunurken, Web fontunun yüklenemesiyle en az bir geri dönüş yazı tipi eklediğinizden emin olun.

Burada, Elena yüklenemezse, tarayıcı genel olarak geri düşer serilik font ailesi: 

 p {
  Yazı Tipi ailesi: Elena, Serif;
}

Fallback Fonts'a daha fazlası var, ama şimdilik, yazı tipi yığımızı sadece genel olarak da dahil olmak üzere basit tutalım. serilik ve sans Serif Yazı tipi aileleri.

Yazı tipi aileleri

Birden fazla stil içeren bir yazı tipi ailesi oluşturmak, oluşturarak gerçekleştirilir. @ Font-Face Her stil için kural ve aynı kullanarak font ailesi isim. Devamındaki @ Font-Face Kurallar normal ve kalın bir tarzda bir aile yaratır: 

 @ font-face {
     Yazı tipi ailesi: Elena;
     SRC: URL (Elena-Regular.woff);
     Yazı Tipi Ağırlığı: Normal;
}
   @ font-face {
     Yazı tipi ailesi: Elena;
     SRC: URL (Elena-Bold.woff);
     Yazı Tipi Ağırlığı: Kalın;
}

Bu yazı tipi ailesini, seçicilerinizdeki aile adını ve ağırlığını referanslayarak CSS'nizde kullanabilirsiniz. Bu, normal stili paragraflara ve kalın stillere uygular. kuvvetli paragraflar: 

 p {
  Yazı Tipi ailesi: Elena, Serif;
}

p güçlü {
  Yazı Tipi Ağırlığı: Kalın;
}

dışında font ağırlığı , @ Font-Face ayrıca kabul eder yazı stili ve font streç Italik ve yoğunlaştırılmış stilleri tanımlayan özellik tanımlayıcıları. Üç özellik tanımlayıcısı, birden fazla stil içeren tek bir yazı tipi ailesi oluşturmak için kullanılabilir. Teorik olarak, bu, 243 bireysel stil içeren bir aile oluşturmanıza olanak sağlar (dokuz font ağırlığı değerler × üç yazı stili Değerler × Dokuz font streç değerler).

Ancak pratikte, bazı tarayıcılar desteklemez, çünkü 27 değerle sınırlıdır. font streç . Hangi tarayıcıları kullanabileceğinizi görmek için aşağıdaki tabloya bakın ve İşte Daha ayrıntılı bilgi için.

Click the icon in the top right to enlarge the image

Görüntüyü büyütmek için üstündeki simgeyi tıklayın

Şansla, kalan tarayıcılar uygulayacak font streç yakında mülk, 243 yazı tipi sınıflandırmalarını kullanabileceksiniz.

Yazı tipi formatları

src Tanımlayıcı, bir tarayıcıyı bir font dosyası alabileceklerini söyler. Önceki örnekler tek bir yazı tipi formatı kullandı, ancak URL'leri kullanarak URL'den sonra eklenen format ipuçları ile birleştirilen birden fazla yazı tipi formatlarına bakarsınız. format ("değer") sözdizimi.

Biçimlendirme İpuçları Tarayıcıya, belirli bir URL'deki yazı tipi dosyasının formatının ne olduğunu söyleyin. 

 @ font-face {
  Yazı tipi ailesi: Elena;
  SRC: URL (Elena-regular.woff2) formatı ("Woff2"),
       URL (Elena-Regular.woff) formatı ("Woff");
}

Birden fazla formatı listeliyorsanız, modern tarayıcılar, Biçimlendirme İpucu'na göre destekledikleri ilk formatı seçer. Bu nedenle, Web yazı tipi formatlarını en azından en az sıkıştırma sırasına göre listelemek önemlidir.

Format ipuçları isteğe bağlı olsa da, her zaman bunları dahil edin - tarayıcının yazı tipini indirmeye gerek kalmadan formatı bilmesine izin verirler. Örneğin, bir tarayıcı Woff2'yi desteklemiyorsa, ancak Woff'u destekliyorsa, Woff2 yazı tipi dosyasını format ipucuna göre atlayabilir.

Tarayıcılar birkaç web yazı tipi formatını destekler: OpenType (TrueType), EOT, Woff ve Woff2. Bazı tarayıcılar ayrıca SVG yazı tiplerini destekler, ancak onlar kullanımdan kaldırılırlar ve artık kullanılmamalıdır (ve ile karıştırılmamalıdır. Yeni OpenType-SVG formatı ).

EOT, WOFF ve WOFF2 teknik olarak font formatları değildir. Onlar farklı derecede sıkıştırma derecelerine sahip OpenType dosyaları sıkıştırılmıştır. Woff2, en iyi sıkıştırma sunar, ardından woff ve eot.

Tüm tarayıcılar için kapsam araştırmasında, denilen bir şeye rastlarmış olabilirsiniz. kurşun geçirmez @ Font-Face sözdizimi Fontspring tarafından.

Kurşun geçirmez sözdizimi, maksimum tarayıcı kapsamı için EOT, WOFF2, WOFF, RAW OpenType ve SVG yazı tipi dosyalarını kullanır: 

 @ font-face {
  Yazı tipi ailesi: Elena;
  SRC: URL (Elena.Eot? #iefix) Formatı ("Embedded-OpenType"),
       URL (Elena.WOff2) formatı ("Woff2"),
       URL (Elena.WOff) formatı ("Woff"),
       URL (Elena.OTF) formatı ("OpenType"),
       URL (Elena.SVG # Elena) formatı ("SVG");
}

İlk URL hattı size biraz garip görünebilir. Internet Explorer 8 ve Aşağıdaki sürümleri, birden fazla yazı tipi formatları için sözdizimini desteklemez ve tüm değerinin tamamını tedavi etmeyin. src URL olarak özellik.

Kurşun geçirmez sözdizimi, Internet Explorer'ı 8 ve aşağıda, kalan URL'lerin ilk URL'nin parça tanımlayıcısının bir parçası olduğunu düşünmek. Dosya indirirken parça tanımlayıcıları göz ardı edildiğinden, Internet Explorer 8 ve aşağıda ilk URL'yi kullanır.

Internet Explorer dışındaki tarayıcılar çizgiyi atlayacaktır, çünkü eot'u desteklemezler.

Girişlerin geri kalanı beklediğiniz şeydir: tercih sırasına göre listelenen yazı tipi formatları.

Ancak kurşun geçirmez sözdizimi hala alakalı mı? Hayır. Aslında, zararlı olduğunu düşünüyorum. SVG yazı tipleri, artık kullanılmayan tarayıcılar tarafından desteklenir ve yalnızca desteklenir.

Çoğu web sitesi Internet Explorer 9 ve UP'yi destekler, ancak sözdizimi ilk tercih edilen yazı tipi formatı olarak eot listeler. Internet Explorer 9 ve UP Destek Woff olsa da, bu sürümler hala eot dosyasını indirir, çünkü önce listelenir.

Çoğu web sitesi artık eski tarayıcıları desteklemiyor, basitleştirilmiş bir sözdizimi kullanmanızı şiddetle tavsiye ederim. Bu basitleştirilmiş sözdizimi, tüm modern tarayıcıları, aynı zamanda Android 4.4 ve daha önce olduğu gibi hala aktif kullanımda olanların yanı sıra, 

 @ font-face {
  Yazı tipi ailesi: Elena;
  SRC: URL (Elena.WOff2) formatı ("Woff2"),
       URL (Elena.WOff) formatı ("Woff"),
       URL (Elena.OTF) formatı ("OpenType");
}

Daha eski Android sürümleri hala kullanılsa da, bu tarayıcılara dünya çapındaki güvencesi hızla azalır. Yakında ham OpenType formatını da düşürebilir ve sözdizimini daha da basitleştirebileceksiniz: 

 @ font-face {
  Yazı tipi ailesi: Elena;
  SRC: URL (Elena.WOff2) formatı ("Woff2"),
       URL (Elena.WOff) formatı ("Woff");
}

Bu durumda, eski bir tarayıcıyı yapan biri, web yazı tipi yerine geri dönüş yazı tiplerinizi görecektir. Bu iyi; Yine de fallback yazı tipindeki içeriği okuyabilirler.

İçin başka bir olası değer var. src tanımlayıcı. yerel İşlev yerel bir font ailesinin adını alır. Yazı tipi sisteme yükleniyorsa, tarayıcı bunun yerine kullanır, böylece ekstra bir indirme işleminden kaçınır. 

 @ font-face {
  Yazı tipi ailesi: Elena;
  SRC: Yerel ("Elena"),
       URL (Elena-regular.woff2) formatı ("Woff2"),
       URL (Elena-Regular.woff) formatı ("Woff");
}

Bu, büyük bir optimizasyon gibi görünse de, hiçbir şey yerel yazı tipinin web fontunuzla eşleştiğini garanti eder.

Font'un farklı bir sürümünü, farklı dil desteğine sahip bir yazı tipi, hatta tamamen farklı bir yazı tipi olabilir. Bu nedenle, genellikle kullanmamayı öneririm. yerel Bu dezavantajları kabul edilebilir bulmadığınız sürece işlev.

Bu Bram Stein'in bir alıntısıdır. Webfont El Kitabı , bir kitaptan ayrı. İçinde, Web yazı tiplerini seçerken, bunları etkin bir şekilde nasıl kullanacağınızı ve performans için nasıl optimize edilmeyeceğiniz şeyleri araştırır.

İlgili Makaleler:

  • Blockchain ne?
  • Web tasarımcıları ve devs için 30 krom uzantısı
  • 20 İnanılmaz Ücretsiz Google Web Fontları

Nasıl Yapılır - En Popüler Makaleler

Onun açısal 8?

Nasıl Yapılır Sep 13, 2025

(Görüntü Kredi: Gelecek) Açısal 8, Google'ın açısalının en son sürümüdür - en iyi javascript ç..

CSS ile akıllı metin efektleri nasıl kodlanır

Nasıl Yapılır Sep 13, 2025

[Görüntü: orta çocuk] Rollover Links, özellikle sıra dışı veya orijinal bir şey yaparlarsa, bir kullanıcı..

Kalem ve mürekkeple bir karakter nasıl çizilir

Nasıl Yapılır Sep 13, 2025

Bir oyun stüdyosunda bir sanatçı olarak, en geleneksel ortamları unuttum, ancak mürekkep her zaman bana geri çağırıyor. ..

Photoshop'ta derinlik eklemek için kalem aracı ve dokuları kullanın

Nasıl Yapılır Sep 13, 2025

Aşağıdaki kısa ekran yakalama videoları üzerinden, Charlie Davis Londra merkezli bir illüstratör, kalem ar..

Beş dakikanın altında bir rakam çizin

Nasıl Yapılır Sep 13, 2025

Beş dakikalık bir poz eskiz etmek çok eğlencelidir çünkü pozun güçlü bir anlamını yakalamak için yeterli zaman sunar, ancak çizimin fazla çalışması (veya fazla düşünmeye)..

Yağlarda enerjik bir deniz manzarası boya

Nasıl Yapılır Sep 13, 2025

Malzemeler Sarah 50x50cm p..

UX Stratejisinin dört ilkesi

Nasıl Yapılır Sep 13, 2025

Bir Yıldız Kullanıcı Deneyimi ( Ux ) Strateji, pazarda zihinsel model inovasyonu aracılığıyla bozulma elde..

GIF'lerden daha fazla nasıl elde edilir

Nasıl Yapılır Sep 13, 2025

Gifler sorunsuz döngülerde çalışır; Rebecca alay 'Mükemmel döngü' olarak tanımlanır. Bu döngü ideal olarak ilk ve ..

Kategoriler