CSS @ font-face Kullanımı

Web yazı tipleri, CSS'de yerel sisteme kurulmamış yazı tiplerine izin vermek için kullanılır. Bu, tasarımcıların ve geliştiricilerin, bilgisayarlarında Arial, Times New Roman, Verdana ve Trebuchet gibi önceden yüklü Web güvenli yazı tiplerine kullanmaya zorunlu olmayacağı anlamına gelir.

Tam olarak CSS3'te yeni olmayan bir özellik olan @ font-face ilk olarak CSS2 için önerildi ve Internet Explorer'da sürüm 5'den beri uygulanmıştır! Bununla birlikte, bunların uygulanması Tescilli Gömülü Açık Tür (.eot) biçimine dayanıyordu başka hiçbir tarayıcı bu biçimi kullanmaya karar vermedi. Bununla birlikte, Safari 3.1'in piyasaya sürülmesiyle, web sitesi yapımcıları sayfalarında herhangi bir lisanslı TrueType (.ttf) veya OpenType (.otf) fontu kullanabilir oldu.

@ Font-face kuralıyla çalışırken, önemli nokta, onu stil sayfanızın başlangıcına yerleştirmektir; Bu, tarayıcınızın gereken fontu işler hale getirmesini sağlayacaktır.

Sözdizimi

@ font-face kuralın genel biçimi şöyledir:

Önemli:

Fontların bir Web-font lisansına sahip olması gerekir! Karşıdan yüklediğiniz Web sitesini veya yazı tipi ile birlikte gelen belgeleri kontrol edin.

@ Font-face'i kullanma

@ Font-face'i kullanmak kolaydır, stil sayfanıza bir kural eklemeniz ve font dosyalarına neredeyse bir resim gibi referans vermeniz yeterlidir:

@font-face {

font-family: Lato

src: url(lato.otf);
}

Sonra, yazı tipinin H1'de görünmesini isterseniz, örneğin şunu kullanın:

h1 { 

font-family: Lato, Helvetica, Arial, sans-serif;

}

ÖRNEK :

@font-face {
    font-family:ubuntu;
  
    src: url(Ubuntu-B.woff);
}

ÇIKTI :

Tarayıcı desteği

@font-face Kuralı tüm büyük modern tarayıcılarda desteklenir.

Font format
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		35.0*		26.0
SVG	4.0			3.2	9.0
EOT		6.0

* IE: Yazı tipi biçimi yalnızca "kurulabilir" olarak ayarlandığında çalışır.

* Firefox: Varsayılan olarak devre dışı, ancak etkinleştirilebilir (WOFF2'yi kullanmak için bir bayrağı "true" olarak ayarlamanız gerekir).

@ font-face dosya türleri

• EOT :(Gömülü Açık Tür) - Internet Explorer / Edge'de (Microsoft tarafından web sayfalarında gömülü fontlar olarak kullanılmak üzere geliştirilen) desteklenen fontlar.
• TTF / OTF :TrueType, 1980'lerin sonlarında Apple ve Microsoft tarafından geliştirilen bir taslak standarttır, hem pencere hem de MAC işletim sistemleri için en yaygın yazı tipi haline gelmiştir. OpenType ölçeklenebilir bilgisayar fontları için bir formattır ve Microsoft tarafından geliştirilmiştir.
• SVG :(Ölçeklenebilir Vektör Grafiği) - vektör grafikleri oluşturmanın bir yolu. SVG biçiminin çok sınırlı desteği vardır (iOS / Safari). Chrome'da kullanılmasının durdurulması planlanmaktadır.
• WOFF :(Web Açık Font Biçimi) - TTF / OTF yazı tiplerinin sıkıştırılmış bir sürümüdür. Biçim, font yazarının fontun kullanımı hakkında bilgi ekleyebildiği meta verileri içerir. WOFF-biçimi tarayıcılardan geniş bir destek almaktadır.

Tipografi kontrolü

Fontlara kalın veya italik gibi belirli bir yazı tipi karakteristiği belirlendiğinde, ilgili kuralı ekleyerek belirli bir indirilebilir yazı tipinin seçilmesini ayarlamak da mümkündür .

@font-face {

 font-family: Lato

 src: url(lato.otf);

 font-weight: bold;

 font-style: normal;
}

• font-style : Yazı tipi stilini belirtir (normal, italik | eğik). Varsayılan değer "normal" dir .
• font-weight : Metnin ne kadar kalın görüneceğini ayarlar. (normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900)

Yazı tipi boyutunu ayarla

Bazı yazı tipleri, standart yazı tiplerine göre farklı boyutlarda gelir. 12 piksel Arial, kullandığınız başka bir fontun göreli boyutunu aynı olmayabilir ve ardından fontun göreli olmasını sağlamak için font-size-adjust işlevini kullanmanız çok kullanışlı olabilir. Bu özellikle yazı tipi desteklenmediğinde ve geri dönüşüm yazı tipinin kullanıldığı zamanlarda kullanışlıdır. Yazı tipinin farklı boyutlarını telafi etmek için daha büyük bir (veya daha küçük) yazı tipi boyutu kullandıysanız, bu, Web sayfalarını kolayca asıl Boyutları eşleştirerek, işe yarayan düzgün Web sayfalarına sahip olabilirsiniz;

p {
font-family:Lato, sans-serif;

font-size-adjust:0.49;
}

src: url(font/lato.otf);