Css Font Face Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te font-face özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.font-face özelliği, bilgisayarımızda hazır olarak gelen yazı tiplerinin ( Arial, Verdana vb..) dışında istediğimiz yazı tiplerini kullanmamıza olanak sağlar.Öncelikle kullanmak istediğimiz font’u bilgisayarımıza indirmemiz gerekiyor.Bunun için birçok site var.Örnek olması için free-font sitesinden bir font indirdim.Google Fontlarını da kullanabilirsiniz.İndirdiğimiz bu font’u projemize dahil etmemiz gerekiyor.

css-dersleri-font-face-kullanimi-0 

Artık font’umuzu indirdik ve projemize dahil ettik.Şimdi de font-face ile bunu nasıl kullanıyoruz ona bakalım.

      ► @font-face yazıp süslü parantezler içerisinde font-family özelliğine istediğimiz bir isim veriyoruz.Burada dilediğimiz ismi verebiliriz.Örneğimizde font’un ismi olan Brush Of Kent ismini verdim.

      ► src özelliğine, projemize dahil ettiğimiz font’un url’ini yazıyoruz.

      ► Son olarak artık nerede bu fontu kullanmak istersek font-family özelliğine yukarda vermiş olduğumuz ismi (Brush Of Kent) yazmamız yeterli olacaktır. 

Şimdi font-face özelliğini kullanmadan önceki ve kullandıktan sonraki durumunu tarayıcıdan inceleyelim.

css-dersleri-font-face-kullanimi-1

css-dersleri-font-face-kullanimi-2

Gördüğünüz gibi bilgisayarımızda hazır olarak gelen font’ların dışında bir font kullandık.

Tarayıcı Desteği

Font’ların farklı format türleri vardır.Bunlar :

TrueType (TTF) : 1980’lerin sonlarında Apple ve Microsoft tarafından geliştirilen, hem Mac OS hem de Microsoft Windows işletim sistemlerinde en çok kullanılan font formatıdır.

OpenType (OTF) : TrueType üzerine kurulmuş ve Microsoft’un tescilli ticari markasıdır.OpenType fontları, bilgisayar platformlarında yaygın olarak kullanılıyor.

Web Açık (WOFF) : WOFF, 2009 yılında geliştirilen ve web sayfalarında kullanılan bir formattır. WOFF, esas olarak OpenType veya TrueType’ın sıkıştırılmış ve ek meta veriler içeren halidir.Amacı, bant genişliği kısıtlamaları olan bir sunucudan bir istemciye ağ üzerinden format dağıtımını sağlamak.

Web Açık (WOFF 2.0) : WOFF 1.0’dan daha iyi sıkıştırma sağlayan TrueType / OpenType font formatıdır.

SVG : Vektörel bir font formatıdır.

Gömülü OpenType (EOT) : Web sayfalarında gömülü font olarak kullanılmak üzere Microsoft tarafından tasarlanan ve OpenType formatının kompakt bir şeklidir.

Bir tarayıcı her formatı desteklemeyebilir.Bunun için font formatlarını birbirine dönüştürebilir veya kullanırken tüm formatları birden projemize dahil edebiliriz.Bunun için birçok site bulunuyor.Örneğin fontsquirrel sitesine bakalım ve kullanımını adım adım yazalım.

      ► Yukarıda indirmiş olduğumuz Brush Of Kent font’u ttf formatındaydı.Siteyi açtığınızdaUpload Fonts ile font’umuzu yükleyelim.

      ► Sunulan 3 seçenekten Expert seçeneğini seçiyoruz.

      ► Font-formats kısmından istediğimiz formatları seçiyoruz.

      ► Character Encoding kısmından Mac Roman’ı seçiyoruz.

      ► Subsetting kısmından Custom Subsetting seçeneğini seçtikten sonra, Languagekısmından Turkish seçeneğini seçiyoruz.

      ► Son olarak Agreement kısmından koşulları kabul edip dosyalarımızı indiriyoruz.

Bizim için indirilen dosyalar şunlar : 

css-dersleri-font-face-kullanimi-3

İndirilen bu font formatlarını projemize dahil ediyoruz ve stylesheet.css dosyasının içerisindeki font-face kodunu alıp kendi css kodlarımıza ekliyoruz.

css-dersleri-font-face-kullanimi-4

Gördüğünüz gibi elimizde olan bir font formatını, diğer tarayıcılarında destekleyeceği hale dönüştürmüş olduk.

Font FormatIEChromeFirefoxSafariOpera
TTF/OTF9.0*4.03.53.110.0
WOFF9.05.03.65.111.1
WOFF2Desteklemiyor36.035.0*Desteklemiyor26.0
SVGDesteklemiyor4.0Desteklemiyor3.29.0
EOT6.0DesteklemiyorDesteklemiyorDesteklemiyorDesteklemiyor

Bu resimde, tarayıcıların font formatlarını hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 30 – Resize Kullanımı

Sonraki : Css Dersleri 32 – Filter Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +