Örnek
Adlı bir yazı tipini belirleyin "myFirstFont" ve bulunabilir URL belirtin:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
@ Font-face kural ile, web tasarımcıları artık birini kullanmak zorunda "web-safe" yazı tipleri.
Yeni @ font-face kuralı, ilk önce yazı tipi için bir ad tanımlanmalıdır (eg myFirstFont) ve sonra yazı tipi dosyasına işaret.
İpucu: Yazı tipi URL için küçük harfler kullanın. Büyük harfler IE beklenmedik sonuçlar verebilir!
Bir HTML öğesi için yazı tipini kullanmak için, yazı tipi adını bakınız (myFirstFont) font-family özelliği üzerinden:
div
{
font-family: myFirstFont;
}Tarayıcı Desteği
@ Font-face kuralı Internet Explorer, Firefox, Opera, Chrome ve Safari'de destekleniyor.
Tablodaki rakamlar tam yazı biçimini destekleyen ilk tarayıcı sürümü belirtir.
| yazı biçimi | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3.5 | 3.1 | 10.0 |
| woff | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| woff2 | 36.0 | Desteklenmiyor | 35.0 * | Desteklenmiyor | 26,0 |
| SVG | 4.0 | Desteklenmiyor | Desteklenmiyor | 3.2 | 9.0 |
| EOT | Desteklenmiyor | 6 | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor |
* Kenar ve IE: olmaya ayarlandığında yazı biçimi, yalnızca çalışır "installable" .
* Firefox: Varsayılan olarak devre dışıdır, ancak (bayrağının ayarlanması gerekir etkinleştirilebilir "true" woff2 kullanmak için).
Sözdizimi
@font-face
{
yazı açıklayıcısı Değerler Açıklama font ailesi name Gereklidir. yazı tipinin adını tanımlar. src URL Gereklidir. Tanımlar URL(s) yazı indirilebilir edilmelidir yazı tipi germe normal
özet
Ultra kondanse
-Ekstra yoğunlaşmış
Yarı-kondense
genişletilmiş
Yarı genişletilmiş
-Ekstra genişletilmiş
Ultra genişletilmiş İsteğe bağlı. Yazı tipi gergin nasıl olması gerektiği tanımlar. Varsayılan değer "normal" yazı stili normal
italik
eğik İsteğe bağlı. Yazı tipi tarz nasıl olması gerektiği tanımlar. Varsayılan değer "normal" yazı ağırlıklı normal
cesur
100
200
300
400
500
600
700
800
900 İsteğe bağlı. fontun kalınlığı tanımlar. Varsayılan değer "normal" Unicode mesafeli unicode-range İsteğe bağlı. yazı destekler unicode karakter aralığını tanımlar. Varsayılan değer "U+0-10FFFF"
it Yourself deneyin - Örnekler
Örnek
Sen cesur metin için tanımlayıcılar içeren başka @ font-face kuralı eklemeniz gerekir:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Kendin dene " Dosya "sansation_bold.woff" Sansation yazı tipi için kalın karakterler içeren başka bir yazı tipi dosyasıdır.
Font-aile ile bir metin parçasıdır zaman Tarayıcılar bu kullanacağız "myFirstFont" olarak cesur bir şekilde oluşturulması gerekir.
Bu şekilde, aynı yazı tipi için birçok @ font-face kuralı olabilir.
İlgili Sayfalar
CSS3 öğretici: CSS3 Yazı Tipleri