CSS Web yazı tipi

CSS @font-face kuralı

Web yazı tipleri, web tasarımcılarının kullanıcı bilgisayarlarında yüklü olmayan yazı tiplerini kullanmalarını sağlar.

Kullanmak istediğiniz yazı tipini bulduğunuzda veya satın aldığınızda, yazı tipi dosyasını web sunucunuzda içerirseniz, kullanıcıya gerektiğinde otomatik olarak indirilir.

CSS'te “sizin” yazı tipiniz @font-face kurallarında tanımlanır.

Farklı yazı tipi formatları

TrueType yazı tipi (TTF)

TrueType, 1980'lerin sonlarında Apple ve Microsoft tarafından geliştirilen yazı tipi standardıdır. TrueType, Mac OS ve Microsoft Windows işletim sistemlerinin en yaygın kullanılan yazı tipi formatıdır.

OpenType yazı tipi (OTF)

OpenType, ölçeklenebilir bilgisayar yazı tipi formatıdır. TrueType tabanlıdır ve Microsoft'un tescilli markasıdır. Bugün, OpenType yazı tipleri ana bilgisayar platformlarında geniş bir şekilde kullanılmaktadır.

Web Açık Yazı Tipi Formatı (WOFF)

WOFF, web sayfalarında kullanılan yazı tipi formatıdır. 2009 yılında geliştirildi ve şu anda W3C'nin önerilen standartı haline geldi. WOFF, aslında sıkıştırma ve diğer meta verilerle donatılmış OpenType veya TrueType'dır. Amacısı, band genişliği kısıtlı olan ağlarda sunucudan istemciye yazı dağılımını desteklemektir.

Web Açık Yazı Tipi Formatı (WOFF 2.0)

TrueType/OpenType yazı tipleri, WOFF 1.0'dan daha iyi sıkıştırma sağlar.

SVG yazı tipi/şekil

SVG yazı tipleri, yazı gösterilirken SVG'yi harf olarak kullanmayı sağlar. SVG 1.1 normu, SVG belgelerinde yazı tipleri oluşturmayı sağlayan bir yazı tipi modülü tanımlar. Ayrıca, SVG belgelerine CSS uygulanabilir ve SVG belgelerindeki metinlere @font-face kuralı uygulanabilir.

嵌入式 OpenType 字体 (EOT)

EOT fontu, Microsoft tarafından tasarlanan OpenType fontunun sıkıştırılmış formudur ve web sayfalarında gömülü font olarak kullanılır.

Font biçimlerinin tarayıcı desteği

Tablodaki rakamlar, bu font biçimini tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Font biçimi
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Desteklenmemektedir Desteklenmemektedir Desteklenmemektedir 3.2 Desteklenmemektedir
EOT 6.0 Desteklenmemektedir Desteklenmemektedir Desteklenmemektedir Desteklenmemektedir

*IE:Bu font biçimi "installable" olarak ayarlandığında geçerlidir.

*Firefox:Varsayılan olarak desteklenmemektedir, ancak etkinleştirilebilir (WOFF2'yi kullanmak için bayrağı "true" olarak ayarlamak gereklidir).

İhtiyacınız olan fontu kullanın

@font-face kurallarında: Öncelikle fontun adını (örneğin myFirstFont) tanımlayın, ardından font dosyasına işaret edin.

İpucu:Font URL'leri her zaman küçük harflerle yazılmalıdır. Büyük harfler IE'de beklenmedik sonuçlar verebilir.

HTML elementlerinde fontu kullanmak için font-family özelliği ile font adını (myFirstFont) belirtin:

örnek

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

Deneyin

Kalın metin kullanarak

Kalın metin tanımlayıcısı içeren başka bir @font-face kuralları eklemelisiniz:

örnek

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Deneyin

Dosya "sansation_bold.woff" Sansation fontunun kalın karakterlerini içeren başka bir font dosyasıdır.

Eğer "myFirstFont" font ailesine sahip bir metin parçası kalın olarak görüntülenmeliyse, tarayıcı bunu kullanır.

Bu şekilde, aynı font için birçok @font-face kurallarında kullanılabilecekleri gösterir.

CSS font tanımı

Aşağıdaki tablo, @font-face Tüm font tanımlayıcılarını (font descriptor) rule içinde tanımlanan:

tanımlayıcı değer tanım
font-family name zorunlu. Font adını tanımlar.
src URL zorunlu. Font dosyasının URL'sini tanımlar.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Opsiyonel. Yazıyı nasıl ger卷坦坦rıldığını tanımlar. Varsayılan değeri "normal" dir.
font-style
  • normal
  • italic
  • oblique
 Opsiyonel. Yazı tarzını tanımlar. Varsayılan değeri "normal" dir.
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Opsiyonel. Yazı kalınlığını tanımlar. Varsayılan değeri "normal" dir.
unicode-range unicode-range Opsiyonel. Yazı desteği sağlayan UNICODE karakter aralığını tanımlar. Varsayılan değeri "U+0-10FFFF" dir.