CSS @font-face Kuralı
Tanımlama ve Kullanım
@font-face kuralı kullanılarak, Web tasarımcıları artık "güvenli" yazıtiplerini 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 yönlendirmelisiniz.
İ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 elementlerinde kullanmak için font-family özelliği ile yazıtipi adını (myFirstFont) kullanı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 bir deneyimleyin
Daha fazla TIY örneği sayfasının altında bulunabilir.
CSS dilbilgisi
@font-face {
font-properties
}
| Yazıtipi tanımlayıcıları | 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 |
|
Opsiyonel. Yazıyı nasıl ger卷lacağınızı tanımlar. Varsayılan değer "normal" dir。 |
| font-style |
|
Opsiyonel. Yazı tarzını tanımlar. Varsayılan değer "normal" dir。 |
| font-weight |
|
Opsiyonel. Yazı kalınlığını tanımlar. Varsayılan değer "normal" dir。 |
| unicode-range | unicode-range | Opsiyonel. Yazı desteklenen Unicode karakter aralığını tanımlar. Varsayılan değer "U+0-10FFFF" dir。 |
Daha fazla örnek
Örnek
Kalin metin tanımlayıcısı içeren bir diğer @font-face kuralı eklemeniz gerekmektedir：
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Kendi kendinize bir deneyimleyin
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 olarak ayarlanan bir paragrafın kalın olarak görüntülenmesi gerektiğinde, 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。
Tablodaki rakamlar, tamamen desteklenen yazı formatının ilk tarayıcı sürümünü belirtir。
| 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）。
