Web Sitenizde İstediğiniz Yazı Tipini Kullanın

Tarih: 31 Mayıs 2010   Yazar: admin  |  4.386 kez okundu
Web Sitenizde İstediğiniz Yazı Tipini Kullanın

Bir web sitesi tasarladınız ancak sizin kullanmak istediğiniz yazı tipi (font) ziyaretçilerinizin bilgisayarında bulunmayacağı için internet tarayıcısı bu yazı tipini tanımayacak ve yazılarınız için bir başka yazı tipi kullanacaktır. Bu ve bu gibi durumlarda seçtiğiniz yazı tipinin herkes tarafından tanınmasını ve kullanılmasını istiyorsanız istediğiniz yazı tipini sunucunuza yükledikten sonra CSS’nizde tanımlayacağınız “@font-face” etiketi ile ziyaretçilerinizin seçtiğiniz yazı tipini görmesini sağlayabilirsiniz.

CSS kodumuza geçmeden öncelikle @font-face yazı tipi çeşitlerinden bahsetmek istiyorum. Popüler internet tarayıcılarının genel olarak desteklediği 4 çeşit yazı tipi bulunmakta. Bunlar .ttf, .otf, .eot ve .svg dir. Yine bu yazı tiplerinden genel olarak bahsetmek gerekirsek:

.ttf Yazı Tipi:
Windows işletim sisteminin kullandığı bu yazı tipi Firefox, Safari, Chrome ve Opera tarayıcıları tarafından desteklenmektedir. Anlamı True Type Font’tur.

.otf Yazı Tipi:
Yine genelde windows işletim sisteminin kullandığı bir yazı tipi dosyasıdır. Anlamı Open Type Font’tur. Firefox, Safari ve Opera tarayıcıları tarafından desteklenmektedir.

.eot Yazı Tipi:
Embedded Open Type anlamına gelen bu yazı tipi Microsoft’un baştan beri desteklediği bir yazı tipidir. Internet Explorer’ın tanıdığı tek yazı tipi dosyasıdır. Bu yüzden web tasarımcıları için bir sorun oluşturmaktadır. Yine internette bulunan bazı yazı tipi dönüştürücüleri ile .ttf uzantılı yazı tipimizi .eot yazı tipine dönüştürüp kullanabilirsiniz. Buradaki çevirici araç tavsiyemdir.

.svg Yazı Tipi:
Esnek yapılı yani vektörel bir yazı tipi dosyasıdır. Anlamı Scalable Vector Graphics yani Ölçeklenebilir Vektörel Grafikler’dir. Safari, Chrome ve Opera tarayıcıları tarafından desteklenmektedir.

@font-face Kodu ve Kullanımı:

Basit olarak @font-face kodunun kullanımı şu şekildedir.


@font-face {
font-family: Sorbize;
src: url(http://www.sorbize.com/fontlar/Sorbize.ttf);
}

p {
font-family: Sorbize;
}

Kod yapımız gördüğünüz gibi iki kısımdan oluşmaktadır. İlk olarak yazı tipimizi yüklüyoruz ve daha sonra bu yazı tipini istediğimiz yerde font-family etiketi ile kullanıyoruz.

Ancak ne yazıkki durum bu kadarda kolay değil. Burada kullandığımız yazı tipi .tff uzantılı yazı tipi dosyası. Bu yazı tipi baştada belirttiğim gibi internet explorer tarafından desteklenmemekte. Ayrıca her tarayıcının her versiyonun @font-face kodumuzu desteklemesi içinse şu şekilde bir kod yapısı kullanmamız gerekiyor.


@font-face {
 font-family: 'Sorbize';
 src: url('Sorbize2.eot');
 src: local('Sorbize'),
 url('Sorbize2.woff') format('woff'),
 url('Sorbize2.svg#Sorbize2') format('svg'),
 url('Sorbize2.TTF') format('truetype');
}

p {
font-family: Sorbize;
}

Bu kod yapımızda sisteme öncelikle .eot uzantılı “Sorbize2” yazı tipimizi tanıttık. Bunu internet explorer için yaptık. Sonrasında gelen kodlar ise diğer tarayıcılar için. Buradaki local tanımı ise eğer kişinin bilgisayarında bu yazı tipi mevcutsa yazı tipini indirmeden direk kullanmak ve bir sonraki kodu internet explorer’dan gizlemek için. Devamı gelen kodlama ise diğer tarayıcılar içindir.

Sonuç olarak şuanki tarayıcı istatistiklerine baktığımızda %94 ‘lük bir kesim @font-face ‘i desteklemekte. İleride tarayıcı teknolojisinin ve kullanım oranlarının değişmesi ile birlilte bu sayı %98 ‘e kadar çıkacaktır. Bu yüzden web sitenizde @font-face kodunu kullanmanız size pek bir zarar sağlamayacaktır. Hatta belkide web sitenizin görünümünün güzelleşmesi ve estetikleşmesi ziyaretçilerinizi daha çok sitenizde tutacak ve size daha fazla ziyaretçi sağlayacaktır.


    Bu yazı için 4 yorum yapılmış.
  1. Aycan Doğanlar dedi ki:

    çok güzel bir makale olmuş ellerine sağlık, benim blogun yazı başlıklarına da uygularız bunu :)

  2. utkuygun dedi ki:

    çok yararlı bir makale , sağol

  3. Osman bektaş dedi ki:

    Gerçekten Çok yaralı ve açık vir makale fakat ben css tanıttım fontu ofonta özellik nasıl vercem onu anlamadım 2 kodumu yazcam anlamadım

    Burak Bey , basitbir örnek mail adresime göndere bilirseniz sevinirim

  4. Kumas cesitleri dedi ki:

    Merhaba admin
    Paylaştığın yazı için öncelikle teşekkür ederim, ben web sitemde Roboto yazı karakterini kullanmak istiyorum bunun için öncelikle bir yazı fontu mu upload etmeliyim?


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.