RSS

@font-face Kullanımı ve Kolaylıkları

Bu yazı 17 Kas 2008 tarihinde yazılmıştır
Fontlar

Fontlar

Web sayfaları hazırlarken bizim için en çok önemli olan materyallerden birisi yazı tipleridir. Tipografisi iyi olan bir web sitesi hem ziyaretçi sayısı hem de popülerliği bakımından diğerlerinden bir adım daha önde olacaktır. Tipografi ile ilgili şu makalelere bakabilirsiniz;

Web standartları dahilinde aklımıza gelen belli başlı yazı tipleri ve yaz aileleri vardır. Nedir bunlar;

  • Arial
  • Helvetica
  • Times New Roman
  • Verdana
  • Georgia v.b

Genel anlamda yazı aileleri hakkında bilgi almak isterseniz (Serif – Sans Serif) http://www.hasanyalcin.com/serif-sans-serif-nedir/ isimli yazısını okuyabilirsiniz.

Bazen sitemizi ziyaret edenlere yazılarımızı, önemli başlıklarımızı veya notlarımızı olağan bir yazı tipi haricinde sunmak isteriz fakat bu yazı tipleri sadece bizim bilgisayarımızda olduğundan karşı taraf bunları göremeyecektir. Bu olumsuz durumu farklı şekillerde çözdük bu zamana kadar. Yeri geldi imaj kullandık yeri geldi sIFR kullandık. Her iki yöntem de kendine göre zahmetli veya zahmetsizdi ama artık bunlara hiç gerek kalmadı çünkü @font-face denilen bir uygulama var.

Gelin hep beraber bu uygulamayı öğrenelim ve artık yukarıda saydığımız işlemlere gerek kalmadan yazı tiplerimizi güzelleştirelim;

Adım 1 – Boş bir html sayfası oluşturun

Oluşturduğumuz boş html sayfası içinde <h1> olarak deneme yazın

<h1>deneme</h1>

Adım 2 – Css kodlarını yazın

Burada dikkat etmemiz gereken bir durum var, @font-face’ i kullanabilmek için öncelikle standart h1 kodumuza ait css kodunu yazıyoruz nedir bu standart kodumuz;

h1{
font-family:'94ROCKEA', georgia, serif;
font-size:48px;
color:#ff0000;
}

Css kodunda h1 elementine ait olan font-family, font-size ve color değerlerini atadık. Ama burada alışılmışın dışında bir durum söz konusu; 94ROCKEA! böyle bir font sistemimizde yok ve aynı zamanda web standartlarına uygun bir font da değil. Fakat biz bu fontu kullanacağımız için font-family kısmına bunu ekledik. Siz de birazdan göreceksiniz ki @font-face kullanımı ile ilgili gerekli olan bir değer. 94ROCKEA fontu yerine siz de başka bir font kullanabilirsiniz. Değişik fontlar için www.dafont.com adresini tavsiye ediyorum.

Adım 3 – @font-face Css kodu

Ve işte şimdi @font-face uygulamasına ait kodu yazmaya

@font-face {
font-family:'94ROCKEA';
src: url('http://www.siteadi.com/yazı tipinin bulunduğu dizin') format('truetype');
}

Gördüğünüz gibi işlem bu kadar basit. Bu kodda bir önce <h1> elementine tanımladığımız font-family değerini doğruluyoruz ve daha sonra kullanacağımız yazı tipinin kaynak yolunu belirtiyoruz. Son olarak da formatını yazıyoruz.

Not: Kullandığınız veya kullanacağınız yazı tiplerinin formatların dikkat edin. Bunlar .otf (open type font) veya .ttf (true type font) olabilir. format kısmına bunu belirtmek zorundasınız.

Örnek uygulamayı görmek için TIKLAYIN


“@font-face Kullanımı ve Kolaylıkları” yazı için 18 Yorum yapılmış.

  1. Mümkün olması lazım. Blogger kullanmadım hiç fakat stil dosyasına erişim izniniz varsa ekleyebilirsiniz kodları.


  2. bu uygulamayı blogger’da da kullanmak mümkün mü?


  3. Sorun çözüldüyse süper!


  4. Kadir bey sadece color yazdım ve oldu teşekkürler.bu Cufon olayıda gayet güzelmiş bunu da deneyeceğim bir ara.çok sağolun


  5. font-color değil de color olarak denedin mi? Bu arada yaptığın örneği bir yere atıp bana linkini gönderir misin? Bu arada Cufon ile ilgili benim bir yazım yok ama Yakut’ er dostumun yazısı var http://www.yakuter.com/cufon-bir-sifr-alternatifi-hakkinda-her-sey/ ulaşabilirsin.


  6. Kadir bey colur yazmışım tamam ben de color olarak denedim ama yine renklendiremedim.bu arada bahsettiğiniz Cufon olayı nedir.örneklerle açıklamak mümkün mü acaba,teşekkürler :)


  7. Cufon gerçekten kullanışlı ve kullanımı kolay bir betik. Bir kaç projede kullandım ben de ve çok memnun kaldım.


  8. Mehmet,
    font-face tüm font özelliklerini alabilir. font-colur diye bir özellik yok, color var ;)


  9. font-face ile tanımlı yazı tipleri bazı tarayıcılarda gösterilmeyebilir. uyumsuzluk sorunlarını daha aza indirgemek için cufon bir alternatif olabilir. :)


  10. olarak birşey unutmuşum.fonta renk veremedim
    font-colur:#ff0000; yaptım ama olmadı


  11. Kadir bey çok güzel bir şey bu,ne zamandır bunu arıyordum :) sağolun valla.peki txt lerimizin büyük harf küçük harf olayını nasıl ayarlayacağız.bir de gradient falan verebilir miyiz fontlara :) teşekkürler tekrardan.


  12. Sayfana baktım. Bu özelliği kullanman için anlatımda bulunan adımları yapman lazım. Sonuçta hepsi CSS ile oluyor. Fakat sadece Safari de düzgün gözükür :)


  13. merhaba adaş.
    http://www.entelektuel.com/ benim sitem bu siteye girince Entelektüel.Com diye bir yazı var ve altında düşünen insanlar için yazısı var ben bu yazılarda değişik fontlar kullanmak istiyorum.Bunu nasıl yaparım ?

    Teşekkürler.


  1. 7 Geri İzleme(ler)

  2. Web Geliştiricileri için 10 Kullanışlı Kod Parçası - Dinozorus.com
  3. Sevdalimsin.Net Sohbet » Blog Archive » @font-face kullanımı
  4. @font-face kullanımı
  5. Web’de Yazı Tipi Özgürlüğü | UBenzer | Umut Benzer | O da kim?
  6. oyyla.com

Yorum Yap!