@font-face ile Çalışmak

Diğer bir font-replacement tekniklerinden olan Cufón‘u bir diğer yazıda incelemiştik. Bu yazıda da @font-face metodunu inceleyeceğiz. @font-face, font-replacement teknikleri arasında kesinlikle en çok dikkat çeken yöntemlerden biri. İlk olarak CSS2 ile birlikte gelmişti, ancak yaşattığı bazı sorunlar sebebiyle rafa kaldırılıp, CSS3 ile birlikte tekrar gündeme oturmuştur.

@font-face, özel fontların web sitelerinde kullanılması için herhangi bir web teknolojisini kullanmıyor. Bu da demek oluyor ki; hiçbir şekilde Flash, PHP ya da JavaScript’e ihtiyaç duymuyor. @font-face kullanarak bir fontu görüntülediğimiz zaman, bir vektör objesi ya da resim yerine, seçilebilir, boyutlandırılabilir ve CSS ile stil verilebilir bir yapı karşımıza çıkıyor.

Mükemmel bir dünyada yaşamıyoruz. Her teknolojinin bazı dezavantajları olduğu gibi, @font-face tekniğinin de bize yaşattığı bazı sorunlar bulunuyor. İlk olarak, şu anda yaygın olarak kullanılan web tarayıcılarının (Mozilla Firefox, Google Chrome, Internet Explorer vs.) farklı font formatları bulunuyor. Internet Explorer, .EOT (Embedded Open Type) formatını, son güncel sürümleriyle birlikte Firefox, Chrome, Safari ve Opera ise .ttf (True Type Format) formatını destekliyor. .OTF (Open Type Format) de birçok tarayıcının desteklediği formatlar arasında. iPhone ve iPad gibi mobil cihazlar da fontların vektörel, yani SVG olan hallerine ihtiyaç duyuyor.

Bu kadar fazla format oluşu can sıkıcı gibi görünse de bunların arasına yeni katılan ve W3C tarafından standart font formatı haline gelen Web Open Font Format ya da diğer adıyla .WOFF içimizi bir nebze de olsa rahatlatıyor. Firefox bu formatı 3.6 sürümünden, Chrome 5.0 sürümünden ve Internet Explorer da 9. sürümünden itibaren desteklemeye başladığını duyurmuştu. Opera ve Safari ise bu kervana biraz geç de olsa katılmış oldular.

[468×15]

 

Diğer sorunlarından birisi de web tarayıcılarının ve işletim sistemlerinin @font-face ile oluşturulan fontları biraz farklı görüntülüyor olması. Bazı web font hizmetleri, fontların farklı görünme sorunu üzerinde çalışarak, font dış hatlarının daha yumuşak, daha estetik ve daha düzgün görüntülenmesini sağlamaya çalışıyorlar.

Avantajları

  • Erişilebilirdir.
  • Unicode desteği bulunur.
  • CSS ile rahatlıkla stil verilebilir.

Dezavantajları

  • Bazı fontların dosya boyutları büyük olduğu için yüklenmeleri biraz zaman alabilir.
  • Tüm tarayıcıların ortak olarak desteklediği bir format yoktur.
  • Birçok font anti-aliasing sorunu yaşatmaktadır. (Dış hatlarını yumuşatma)
  • Dağıtım izni yoktur. Bu da demek oluyor ki; özel font kullanarak tasarladığınız bir websitesini, fontun Distribution License’ını satın almadan bir başkasına satamazsınız.

Aşağıda @font-face ile ilgili yerli ve yabancı bazı kaynaklar paylaştım. Bu kaynaklardan @font-face ile ilgili daha detaylı bilgiler alabilir, nasıl kullanıldığını öğrenebilir ve ipuçlarından faydalanabilirsiniz.

Kaynaklar

http://www.fontsquirrel.com/fontface/generator
https://developer.mozilla.org/en/CSS/@font-face