CSS font-face Özelliği

CSS font-face

Css @font-face özelliği ile bir link belirterek istenilen fontlar kulanılabilir.Bu fontu kullanmak için ise bir isim oluşturulmalıdır.Detaylar için örnekleri inceliyiniz.

Örnek:

Bu örnekte google drive'a yüklediğimiz bir font dosyasındaki fontu kullanmak için bir isim oluşturduk ve url adresini girerek ,örnekteki div elemanına uyguladık.

@font-face { font-family: erensfont; src: url(http://googledrive.com/host/0Bw9sucy12hO3ZjVka2UwZGU5U2s); } div { font-family: erensfont; font-size: 50px; }

CSS font-face nedir nasıl kullanılır

Font-face özelliğini kullanırken bir isim oluşturulmalı ve fontu kullanacağınız dosyanın url'si örneklerimizdeki gibi uygulanmalıdır.

CSS font-face Tarayıcı Desteği

Tablodaki sayılar özelliği destekleyen tarayıcı sürümleridir.

Font-face
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.0	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor

CSS font-face Değerleri

@font-face {
  font-properties
}

CSS font-face özelliği değerleri

CSS font-face Tanımlayıcıları	CSS font-face değerleri	CSS font-face Açıklamaları
font-family	isim	Font için bir isim tanımlanır.
src	Url adresi girilir	Fontun nereden indirileceği tanımlanır.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Yazı tipi gergin nasıl olması gerektiğini tanımlar . Varsayılan değer "normal"
font-style	normal italic oblique	Yazı tipi tarz nasıl olması gerektiğini tanımlar . Varsayılan değer "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Varsayılan değeri "normal" dir.
unicode-range	unicode-range	Yazı destekleyen unicode karakter aralığını tanımlar. Varsayılan değer "U + 0-10FFFF " dir