CSS Web Yazı Tipleri
CSS @font-face Kuralı
Web yazı tipleri, Web tasarımcılarının kullanıcının bilgisayarında yüklü olmayan yazı tiplerini kullanmalarına izin verir.
Kullanmak istediğiniz yazı tipini bulduğunuzda/satın aldığınızda, sadece yazı tipi dosyasını web sunucunuza ekleyin ve gerektiğinde otomatik olarak kullanıcıya indirilecektir.
"Kendi" yazı tipleriniz CSS @font-facekuralı içinde tanımlanır.
Farklı Yazı Tipi Formatları
TrueType Yazı Tipleri (TTF)
TrueType, 1980'lerin sonlarında Apple ve Microsoft tarafından geliştirilen bir yazı tipi standardıdır. TrueType, hem Mac OS hem de Microsoft Windows işletim sistemleri için en yaygın yazı tipi biçimidir.
OpenType Yazı Tipleri (OTF)
OpenType, ölçeklenebilir bilgisayar yazı tipleri için bir biçimdir. TrueType üzerine kurulmuştur ve Microsoft'un tescilli ticari markasıdır. OpenType yazı tipleri günümüzde büyük bilgisayar platformlarında yaygın olarak kullanılmaktadır.
Web Açık Yazı Tipi Biçimi (WOFF)
WOFF, web sayfalarında kullanım için bir yazı tipi biçimidir. 2009'da geliştirildi ve şimdi bir W3C Tavsiyesi. WOFF, temelde sıkıştırma ve ek meta veriler içeren OpenType veya TrueType'tır. Amaç, bant genişliği kısıtlamaları olan bir ağ üzerinden bir sunucudan istemciye yazı tipi dağıtımını desteklemektir.
Web Açık Yazı Tipi Biçimi (WOFF 2.0)
WOFF 1.0'dan daha iyi sıkıştırma sağlayan TrueType/OpenType yazı tipi.
SVG Yazı Tipleri/Şekiller
SVG yazı tipleri, metin görüntülerken SVG'nin glifler olarak kullanılmasına izin verir. SVG 1.1 spesifikasyonu, bir SVG belgesi içinde yazı tiplerinin oluşturulmasına izin veren bir yazı tipi modülünü tanımlar. CSS'yi SVG belgelerine de uygulayabilirsiniz ve @font-face kuralı SVG belgelerindeki metne uygulanabilir.
Gömülü OpenType Yazı Tipleri (EOT)
EOT yazı tipleri, Microsoft tarafından web sayfalarında gömülü yazı tipleri olarak kullanılmak üzere tasarlanmış kompakt bir OpenType yazı tipi biçimidir.
Yazı Tipi Biçimleri için Tarayıcı Desteği
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 |
*IE: Yazı tipi biçimi yalnızca "yüklenebilir" olarak ayarlandığında çalışır.
İstediğiniz Yazı Tipini Kullanma
Kuralda @font-face; önce yazı tipi için bir isim tanımlayın (örn. myFirstFont) ve sonra yazı tipi dosyasına gelin.
İpucu: Yazı tipi URL'si için her zaman küçük harfler kullanın. IE'de büyük harfler beklenmeyen sonuçlar verebilir.
Bir HTML öğesi için yazı tipini kullanmak için, font-familyözellik aracılığıyla yazı tipinin adına (myFirstFont) bakın:
Örnek
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Kalın Metin Kullanma
@font-faceKalın metin için tanımlayıcılar içeren başka bir kural eklemelisiniz :
Örnek
@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-facekuralınız olabilir.
CSS Yazı Tipi Tanımlayıcıları
@font-faceAşağıdaki tablo, kuralın içinde tanımlanabilecek tüm yazı tipi tanımlayıcılarını listeler :
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| 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 is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |