CSS3 @font-face

@font-face :

Her web sayfasının bir font’a ihtiyacı vardır. Tanımlanmadığı durumlarda bunu her web tarayıcısı farklı yorumlayabilir. Burada örnekte göreceğiniz ilk değer geçerli olan fonttur. O fontun web tarayıcısı tarafından okunamadığı yada tanımlanamadığı durumlarda ikinci font devreye girecektir.

Örnek

 @font-face {
    font-family: 'robotomedium';
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot');
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff2') format('woff2'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff') format('woff'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.ttf') format('truetype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

  }

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/BogWOx/">font-face</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Css Sözdizimi

Değer	Açıklama
font-family	Gerekli. Yazının adını tanımlar.
src	Gerekli. yazının bulunduğu konumu belirtmek için kullanılır.
font-stretch	Yazı tipi renginin nasıl olması gerektiğini belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-style	Yazı tipi stilinin nasıl olacağını belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-weight	Fontun kalınlığını belirlemek için kullanılır. Varsayılan değer “normal” dir.
unicode-range	Yazı karakter aralığını belirtmek için kullanılır. Varsayılan değer “U+0-10FFFF” dir.
İnital
İnherit

Tarayıcı Desteği


TTF/OTF	4.0	3.5	9.0	3.1	10.0
WOFF	5.0	3.6	9.0	5.1	11.1
WOFF2	36.0	35.0	desteklenmiyor	desteklenmiyor	26.0
SVG	4.0	desteklenmiyor	desteklenmiyor	3.2	9.0
EOT	desteklenmiyor	desteklenmiyor	6.0	desteklenmiyor	desteklenmiyor

Bir cevap yazın Cevabı iptal et