Font face kullanımı
04 Aralık 2015
1 dk okuma süresi
83 okunma
Tüm tarayıcıların desteklediği font-face kullanımı aşağıdaki gibidir ve fontunuzun tüm formatlarını eklemeniz gerekir. Ttf vey eot font uzantılarının boyutları diğer font uzantılarına göre daha fazladır. Bu nedenle site açılış hızına olumsuz etki edebilir. Tabi fontları sıkıştırmak buna çare olabilir.
@font-face { font-family: 'FontAdi'; src: url('FontAdi.eot'); /* IE9 uyumluluk modu */ src: url('FontAdi.eot?#iefix') format('embedded-opentype'), /* IE6, IE7, IE8 */ url('FontAdi.woff2') format('woff2'), /* Yeni tarayıcılar */ url('FontAdi.woff') format('woff'), /* Yeni tarayıcılar */ url('FontAdi.ttf') format('truetype'), /* Safari, Android, iOS */ url('FontAdi.svg#svgFontAdi') format('svg'); /* iOS */ }
Eğer tüm tarayıcılar önemli değil sadece yeni ve güncel tarayıcılarda font-face aktif olsun derseniz aşağıdaki kullanıma göz atabilirsiniz.
@font-face { font-family: 'FontAdi'; src: url('FontAdi.woff2') format('woff2'), url('FontAdi.woff') format('woff'); }
Woff ve woff2 güncel tarayıcılar için en iyi seçenektir ve font boyutları da oldukça düşüktür. Bu da sitenizin açılış hızını olumlu şekilde etkiler.
Yazılarıma abone olmak ister misiniz?
İlginizi çekebilecek diğer yazılar.