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

Yorumlar

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

Linklerin Renklerini Değiştirme Örnek

YouTube Reklam Engelleyici

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML Resimler

HTML bdo Etiketi Örnek