Selam,
Font-Face nedir ? Ne işeyarar ? Nasıl kullanırım ? sorularını cevaplayarak font-face’ i inceleyelim..
Font-face ile yaptığımız siteler içerisinde özel font kullanarak içeriklerimizi görsel açıdan zenginleştirebiliriz. Sistemde yüklü olmayan fontlar font-face özelliği ile ziyaretçinin bilgisayarına indirilip (cache -keş- belleğe) kullanma imkanı verir. Font-face özelliği CSS2 ile geldi fakat CSS2.1 de bazı sorunlar nedeniyle kaldırılmıştı ki CSS3 ile birlikte tekrar geldi. -iyide oldu-
Kullanacağımız font(-lar) free, opentype yada trutype olmalıdır, tasarımlarda kullanılan font eğer lisans gerektiren bir fontsa servis bunu çevirmiyor ve lisanslı bir font kullandığınıza dair sizi uyarıyor.
Font-face özelliğini tüm yeni nesil tarayıcılar kendi belirledikleri yada mevcut bazı font formatlarını destekliyorlar, mevcut tarayıcılar yada eski sürüm tarayıcılar için font tarayıcı tablosunu incelemelisiniz.
Tablodanda görüldüğü gibi projemizde kullanılan bir font için tüm tarayıcılar da-genelde referans aldıklarımız ie, chrome, firefox- görüntülenebilmesi için aynı fontun dört farklı formatını edinmemiz gerekiyor. İşte bu noktada www.fontsquirrel.com adresindeki font-face servisi tam bizlik!
Çünkü herhangi bir formattaki fontumuzu upload edip dört farklı formatta fontlarla beraber, nasıl kullanmamız gerektiği ile ilgili dökümanıda bizim içi oluşturuyor bu sistem.
Çünkü herhangi bir formattaki fontumuzu upload edip dört farklı formatta fontlarla beraber, nasıl kullanmamız gerektiği ile ilgili dökümanıda bizim içi oluşturuyor bu sistem.
Türkçe karakter destekli font-face servisini en verimli şekilde kullanmak için ‘Font-face kit generator’ görselindeki ayarları yapmamız gerekir. Burdaki numaralanmış yerleri maddeler halinde yazacağım. Ayrıca font ayarları ve optimize noktasında desteğini esirgemeyen Dilek Yördem arkadaşıma teşekkür etmeden geçemeyeceğim. Aşağıda vereceğim adımlar ve klavuz görsel en temek hali ile işinizi görebilecek maddeler içerir daha detaylı bir bilgi için servisin diğer ayarlarını ve http://www.fontspring.com/fontface adresini inceleyebilirsiniz.
1- Fontu upload ediyoruz.
2- Fontu optimize edeceğimiz için bu seçeneği seçiyoruz ve altaki detay ve optimize ayarları çıkıyor.
3- Font ayarları ve diğer karakterleri eklemek için bu bölümü açınca karakter tipi, dil ve unicode ayarı yapabiliyoruz,
4- Mac Roman,
5- Turkish,
6- Basic Latin ayarı ile Türkçe karakter sorununu ortadan kaldırıyoruz, -fontumuzun Türkçe karakter desteklemesi gerektiğini unutmayalım-
7- Aynı ayarlarımızı bir sonraki kullanımda tekrar hatırlaması için,
8- Yasal koşulları kabul edip font paketini indiriyoruz.
“CompleteinHimTR” ismindeki özel fontumuz ile örnek bir uygulama yapalım, fontumuz görüldüğü gibi TrueType formatında.
Yukarıdaki adımları izleyerek fontu upload edip, optimize ve Türkçe karakter ayarlarını yaptıkdan sonra koşulları onayladık ve “Download Your Kit ” butonu ile dosyamızı indirip inceliyoruz. Style dosyasını ve dört farklı formattaki fontlarımı oluşturdu. Dosya içerisindeki html de önizlemesini ve nasıl sayfalarımda kullanmam gerektiği ile ilgili dökümantasyon mevcut.
Döküman gayet net ve açıklayıcı font-face kodunu ve fontlarımızı kopyaladıktan sonra istediğimiz şekilde geliştirip proje içerisinde kullanabiliriz artık. Css kullanımında ise en verimli olarak şu şekilde kullanmalıyız.
En üstte ‘reset.css’ sonra kullandığımız fontlar için bir ‘fonts.css’ ve proje içerisinde kullandığımız ‘style.css’ dosyaları, dilerseniz style.css yada main.css -bu size ve projenize göre değişiklik gösterebilir tabiki- içerisine import ederek de kullanabilirsiniz. Şahsen ben projeye tek bir css yüklüyorum “main.css” main.css içerisine en üstüne önce reset.css’i sonrasında ise font.css ‘im varsa onu @import ediyorum.
Kod olarak örnek verecek olursak, şu şekilde kullanabiliyorsunuz -bunu indirdiğimiz paket içerisinde de bulabilirsiniz-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Font-Face</title><style type="text/css"> @font-face { font-family: 'CompleteinHimTRRegular'; src: url('complete_in_him_tr-webfont.eot'); src: url('complete_in_him_tr-webfont.eot?#iefix') format('embedded-opentype'), url('complete_in_him_tr-webfont.woff') format('woff'), url('complete_in_him_tr-webfont.ttf') format('truetype'), url('complete_in_him_tr-webfont.svg#CompleteinHimTRRegular') format('svg'); font-weight: normal; font-style: normal;} h1 { font-family: 'CompleteinHimTRRegular'; font-size:26px; color:#666;}</style></head><body> <h1>Alafortanfoni Dev Blog</h1></body></html> |
Görüldüğü gibi arayüz geliştirirken çoğu zaman bizi sıkıntıya sokan ie ve sürümlerinde bile doğru ayarlar yapıldığında gayet verimli bir şekilde çalışıyor.
“Abi uğraştırma beni bunlarla, varmı şöyle elinde güzel fontlu hazır bişiler..” diyen arkadaşlarda http://www.fontsquirrel.com/fontface burayı inceleyebilirler sizin için hazır font kitleri mevcut..
Son olarak şunu belirtmekte fayda var internet explorer da localde gayet güzel çalışırken server üzerinde bazen sorun yaratmaktadır Ferit Arslan’ın incelemesi ve çözümlemesine göre Windows server da ISS panel üzerinden mime type leri içerisine eğer “.eot” formatı tanımlı değilse bu formatı tanımlanması gerekmektedir.
Bu konuda incelediğimiz fontu ve örnek dosyaları Font-Face bağlantısı ile indirebilirsiniz.
Kaynak : http://www.mehmetbat.com
Hiç yorum yok:
Yorum Gönder