CSS @font-face Kuralı

Tanımlama ve Kullanım

@font-face kuralı kullanılarak, Web tasarımcıları artık herhangi bir "güvenli" yazıtipi kullanmak zorunda kalmaz.

@font-face kuralında, önce yazıtipi adını (örneğin myFirstFont) tanımlamalısınız, ardından yazıtipi dosyasına işaret etmelisiniz.

İpucu:Yazıtipi URL'si küçük harflerle yazılmalıdır. Büyük harfler IE'de beklenmedik sonuçlar verebilir!

Yazıtipini HTML elementlerine kullanmak için font-family özelliği ile yazıtipi adını (myFirstFont) çağırın:

div {
  font-family: myFirstFont;
}

Ayrıca bakınız:

CSS Eğitimi:CSS Web Yazı Tipi

Örnek

Bir "myFirstFont" adlı yazıtipi belirleyin ve onun URL'sini tanımlayın:

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

Kendi kendinize deneyin

Daha fazla TIY örneği, sayfanın altında bulunabilir.

CSS dilbilgisi

@font-face {
  font-properties
}
Yazıtipi tanımlayıcı Değer Açıklama
font-family name Gerekli. Yazıtipi adını tanımlar.
src URL Gerekli. İndirilen yazıtipinin URL'sini tanımlar.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Opsiyonel. Yazının nasıl geriltilmesini 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ının kalınlığını tanımlar. Varsayılan değeri "normal" dir。
unicode-range unicode-range Opsiyonel. Yazı, desteklenen Unicode karakter aralığını tanımlar. Varsayılan değeri "U+0-10FFFF" dir。

Daha fazla örnek

Örnek

Sizi kalın metin tanımlayıcı içeren bir başka @font-face kuralı eklemeniz gerekmektedir：

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

Kendi kendinize deneyin

Dosya "sansation_bold.woff", Sansation yazısının kalın karakterlerini içeren başka bir yazı dosyasıdır。

Her zaman "myFirstFont" yazı ailesi olan bir metin kalın olarak görüntülenmelidir ise, tarayıcı bunu kullanır。

Bu şekilde, aynı yazıya birden fazla @font-face kuralı ayarlayabilirsiniz。

Tarayıcı desteği

Internet Explorer, Firefox, Opera, Chrome ve Safari @font-face kuralını destekler。

Tablo içindeki sayılar, yazı formatının tamamen desteklenen ilk tarayıcı sürümünü belirtmektedir。

Yazı formatı
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 Desteklenmiyor Desteklenmiyor Desteklenmiyor 3.2 Desteklenmiyor
EOT 6.0 Desteklenmiyor Desteklenmiyor Desteklenmiyor Desteklenmiyor

* Edge ve IE: Yazı formatı "installable" olarak ayarlandığında geçerlidir。

* Firefox：默认情况下是禁用的，但可启用（需要将 flag 设置为 "true" 才能使用 WOFF2）。