CSS3 Web Fonts - @font-face kuralı
Web yazı tipleri Web tasarımcıları, kullanıcının bilgisayarına yüklü olmayan yazı tiplerini kullanmak için izin verir.
Bulduğunuz zaman / sadece web sunucusunda yazı dosyası içerir, kullanmak istediğiniz yazı tipini satın aldı ve gerektiğinde otomatik olarak kullanıcıya indirilecek.
Sizin "own" yazı CSS3 içinde tanımlanmıştır @font-face kuralı.
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Farklı Yazı Biçimleri
TrueType yazı tipleri (TTF)
TrueType Apple ve Microsoft tarafından, 1980'lerin sonlarında geliştirilen bir yazı standardıdır. TrueType , Mac OS ve Microsoft Windows işletim sistemleri için en yaygın yazı biçimidir.
OpenType yazı tipleri (OTF)
OpenType ölçeklenebilir bilgisayar yazı tipleri için bir biçimdir. Bu inşa edilmiştir TrueType ve Microsoft'un kayıtlı ticari markasıdır. OpenType yazı tipleri başlıca bilgisayar platformlarında bugün yaygın olarak kullanılmaktadır.
Woff (WOFF)
WOFF web sayfalarında kullanılmak üzere bir yazı biçimidir. 2009 yılında geliştirilen ve şimdi bir W3C Tavsiyeler edildi. Woff temelde OpenType veya TrueType sıkıştırma ve ek meta verilerle. Amaç bant genişliği sınırlamaları olan bir ağ üzerinden bir müşteriye bir sunucudan yazı dağılımını desteklemektir.
Woff (WOFF 2.0)
TrueType/OpenType daha iyi sıkıştırma sağlar yazı WOFF 1.0.
SVG Yazı / Şekilleri
SVG yazı tipleri metni görüntülerken SVG glif olarak kullanılmasına izin verir. SVG 1.1 özellikleri bir SVG belge içinde yazı oluşturulmasını sağlayan bir yazı modülü tanımlar. Ayrıca SVG belgelere CSS uygulayabilirsiniz ve @font-face kuralı SVG belgelerinde metne uygulanabilir.
Gömülü OpenType yazı tipleri (EOT)
EOT yazı bir kompakt biçimidir OpenType web sayfalarında gömülü yazı olarak kullanılmak üzere Microsoft tarafından tasarlanan yazı.
Yazı Biçimleri için Tarayıcı Desteği
Tablodaki rakamlar tam yazı biçimini destekleyen ilk tarayıcı sürümü belirtir.
| yazı biçimi | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Desteklenmiyor | 36.0 | 35.0 * | Desteklenmiyor | 26,0 |
| SVG | Desteklenmiyor | 4.0 | Desteklenmiyor | 3.2 | 9.0 |
| EOT | 6 | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor |
* IE: olmaya ayarlandığında yazı biçimi, yalnızca çalışır "installable" .
* Firefox: Varsayılan tarafından desteklenen değil, ama (bir bayrak ayarlamanız gerekir etkinleştirilebilir "true" woff2 kullanmak için).
İstediğiniz Yazı kullanma
CSS3 olarak @font-face kuralı ilk yazı tipi için bir ad tanımlanmalıdır (eg myFirstFont ) ve sonra yazı tipi dosyasına işaret.
İpucu: Her zaman yazı URL için küçük harfler kullanın. Büyük harfler IE beklenmeyen sonuçlar verebilir.
Bir HTML öğesi için yazı tipini kullanmak için, yazı tipi adını bakınız ( myFirstFont ) aracılığıyla font-family özelliği:
Örnek
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Kendin dene " Kalın Metin kullanma
Başka eklemelisiniz @font-face kalın metin için tanımlayıcılar içeren kural:
Örnek
@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-family "ile metin parçasıdır zaman Tarayıcılar Bu kullanacaktır myFirstFont " olarak cesur bir şekilde oluşturulması gerekir.
Bu şekilde birçok olabilir @font-face aynı yazı için kurallar.
Egzersizleri ile Yourself test edin!
CSS3 Yazı Tanıtıcılar
Aşağıdaki tablo içinde tanımlanabilir tüm yazı tanımlayıcıları listeler @font-face kuralı:
| Tanımlayıcı | Değerler | Açıklama |
|---|---|---|
| font-family | name | Gereklidir. yazı tipi için isim tanımlar |
| src | URL | Gereklidir. Yazı tipi dosyasının URL'sini tanımlar |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | İsteğe bağlı. Yazı tipi gergin nasıl olması gerektiği tanımlar. Standart olan "normal" |
| font-style | normal italic oblique | İsteğe bağlı. Yazı tipi tarz nasıl olması gerektiği tanımlar. Standart olan "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | İsteğe bağlı. fontun kalınlığı tanımlar. Standart olan "normal" |
| unicode-range | unicode-range | İsteğe bağlı. Yazı tipi destekleyen UNICODE karakterlerin aralığını tanımlar. Standart olan "U+0-10FFFF" |