CSS @font-face Kuralı
Örnek
"myFirstFont" adlı bir yazı tipi belirleyin ve bulunabileceği URL'yi belirtin:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Kuralla @font-face, web tasarımcıları artık "web için güvenli" yazı tiplerinden birini kullanmak zorunda değil.
Kuralda @font-face, önce yazı tipi için bir isim (örneğin myFirstFont) tanımlamalı ve sonra yazı tipi dosyasını göstermelisiniz.
Fontu bir HTML öğesi için kullanmak için font-family özelliği aracılığıyla fontun adına (myFirstFont) bakın:
div
{
font-family: myFirstFont;
}
Tarayıcı Desteği
Kural @font-faceEdge, Chrome, Firefox, Safari ve Opera'da desteklenir.
Tablodaki sayılar, yazı tipi biçimini tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Font 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*Yazı tipi biçimi yalnızca "yüklenebilir" olarak ayarlandığında çalışır.
Sözdizimi
@font-face
{
font-properties
}
| Font descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font should be downloaded from |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Daha fazla örnek
Örnek
Kalın metin için tanımlayıcılar içeren başka bir @font-face kuralı eklemelisiniz:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
"sansation_bold.woff" dosyası, Sansation yazı tipi için kalın karakterleri içeren başka bir yazı tipi dosyasıdır.
Tarayıcılar, "myFirstFont" yazı tipi ailesine sahip bir metin parçasının kalın olarak işlenmesi gerektiğinde bunu kullanır.
Bu şekilde aynı yazı tipi için birçok @font-face kuralına sahip olabilirsiniz.
İlgili Sayfalar
CSS eğitimi: CSS Web Yazı Tipleri