@font-face Kullanımı ve Kolaylıkları
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;
- http://www.wpdfd.com/issues/23/typography/
- http://www.flywebmaster.com/webdesign/tips/typography.php
- http://www.bildirgec.org/ara/tipografi
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ış.
7 Geri İzleme(ler)
- 08 Kas 2009: Web Geliştiricileri için 10 Kullanışlı Kod Parçası - Dinozorus.com
- 04 Kas 2009: Sevdalimsin.Net Sohbet » Blog Archive » @font-face kullanımı
- 03 Kas 2009: @font-face kullanımı
- 28 Ağu 2009: Web’de Yazı Tipi Özgürlüğü | UBenzer | Umut Benzer | O da kim?
- 17 Kas 2008: oyyla.com
Mümkün olması lazım. Blogger kullanmadım hiç fakat stil dosyasına erişim izniniz varsa ekleyebilirsiniz kodları.
bu uygulamayı blogger’da da kullanmak mümkün mü?
Sorun çözüldüyse süper!
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
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.
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
Cufon gerçekten kullanışlı ve kullanımı kolay bir betik. Bir kaç projede kullandım ben de ve çok memnun kaldım.
Mehmet,
font-face tüm font özelliklerini alabilir. font-colur diye bir özellik yok, color var
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.
olarak birşey unutmuşum.fonta renk veremedim
font-colur:#ff0000; yaptım ama olmadı
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.
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
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.