@Font-Face Kullanımı

Daha önce “Yeni nesil web tasarımcı olmak” başlıklı makalemde de bahsettiğim üzere, web sitelerimizde standart sistem fontlarından farklı fontlar kullanmak için artık sIFR gibi Flash tabanlı scriptler kullanmak zorunda değiliz. CSS 3′ün bize hediye ettiği en güzel özelliklerden biri olan @font-face ile bu işin üstesinden çok kolay bir şekilde gelebiliyoruz. Ancak o makalede @font-face özelliğinin üstünde çok durmamıştım. Verdiğim örnek satırlar @font-face’in genel kullanımını temsil ediyordu. O haliyle kullandığınız zaman bütün tarayıcılarda aynı sonucu alamazsınız.
Ben de blogumda font-face kullanmaya başladığımdan olsa gerek, konu ile ilgili ayrıntılı bir makale yazmak istedim. (Blogumdaki font-face özelliğini görmeniz için tarayıcınızın geçmişini silmeniz gerekebilir.) @font-face’in bütün tarayıcılarda aynı sonucu alacak şekilde nasıl kullanılacağından bahsetmek istiyorum. @font-face’i doğru kullandığınız takdirde aşağıdaki tarayıcılarda düzgün çalıştırabilir ve istediğiniz fontları web sitenizde sorunsuz kullanabilirsiniz:
Safari 3.1+
Opera 10+
Firefox 3.5+
Chrome 4.0+
Internet Explorer 6+
Bütün tarayıcılarda @font-face kullanımı
Font dosyalarınızın bir arada düzgün bir şekilde bulunmasını sağlamak için ilk yapacağınız şey, sunucunuzda “fonts” klasörü oluşturmak olsun. Fontlarınızı bu klasöre kopyaladıktan sonra aşağıdaki satırları CSS dosyanıza yerleştirin. Font seçerken, türkçe karakterleri destekliyor olduğuna dikkat etmelisiniz. Yoksa türkçe karakterleri sistem fontu olarak gösterir. Bunun da pek hoş bir görüntü oluşturduğunu söyleyemem. Gelelim @font-face satırlarına…
@font-face {

/* declare fonts */
font-family: “MuseoLight”;
src: url(“fonts/Museo300-Regular.;feot”);
src: local(“Museo 300”), local(“Museo-300”),
url(“fonts/Museo300-Regular.woff”) format(“woff”),
url(“fonts/Museo300-Regular.otf”) format(“opentype”),
url(“fonts/Museo300-Regular.svg#Museo-300”) format(“svg”);
}
Fontları çağırdığınız bağlantı yollarının doğru olduğundan emin olmalısınız. Bu satırlarda örnek olarak kullanılan MuseoLight font ailesini istediğiniz gibi değiştirebilirsiniz.
Daha sonra da bu fontu sitenin neresinde kullanacaksanız, CSS dosyasına bu özelliği aşağıdaki gibi tanımlamanız yeterli olur.

h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }
@font-face’in bütün tarayıcılarda düzgün çalışacak şekilde kullanımı bu kadar basit aslında.
Fark ettiğiniz üzere, bir fontu kullanabilmek için birden fazla font uzantısı kullanmamız gerekiyor. Bunun sebebi en çok kullanılan font uzantısı olan TTF’nin bütün tarayıcıların bütün versiyonları tarafından desteklenmiyor olması. Hatta Internet Explorer yine yapacağını yapıyor ve hiç bir versiyonunda TTF uzantısını desteklemiyor. Aşağıdaki tabloda hangi font uzantılarının hangi tarayıcılar ve versiyonlar tarafından desteklendiğini görebilirsiniz.

Font uzantılarını değiştirme
İsterseniz font uzantılarını birbirine çeviren ücretsiz programları indirip kullanabilirsiniz. Ama TTF uzantısını font-face’de kullanılan bütün uzantılara çevirebilen bir o kadar çok online araç varken, program indirmekle uğraşmanıza gerek yok. Bunların bana göre en iyisi fontsquirre, bu işin başarıyla üstünden geliyor.

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s