@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.
1 Trackback(s)