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 : yazı tipi adı

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


@ font-face {font-family: fontadı; src: url (yazı tipi dosyası yolu); }

Ö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 :

Ubuntu

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


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;
}

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;
}

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5827

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.