t-infection.com | tasarım oyuncakları, web teknolojileri » Font

Css3 font-face Seçicisiyle Özel Yazıtipi Kullanmak

webthese — Sat, 29 Aug 2009 23:20:11 +0000

(Merhabalar, bu anlamlı gün vesilesiyle tüm ziyaretçilerimizin 30 Ağustos Zafer Bayramı‘nı kutluyorum. Allah milletimize nice 30 Ağustosları barış, birlik ve beraberlikle görmeyi nasip etsin)

Web tarayıcıların gelişmesiyle artık (kısıtlı da olsa) Css3′ün nimetlerinden faydalanabiliyoruz. Bu makalemizde basit olarak özel bir yazıtipinin Css3‘te kullanımını ve gösterimini (Font Embed, Yazıtipi gömme olarakta dilimize çevirebiliriz) anlatacağız. Yapacağımız örnekleri Firefox 3.5+ sürümlerde rahatlıkla görebilirsiniz.

Önce örneğimizde kullanacağımız yazıtipini belirleyelim. Ben şurada bulunan White Board Modern isimli yazıtipini indirdim. Dilerseniz siz farklı bir yazıtipi kullanabilirsiniz. İndirdiğimiz yazıtipini gösterecek olan Css kodlarımızı yazalım ve bu yazdığımız kodu işleme koyacak olan bir alanda gösterelim.
@font-face {
font-family: “White Board Modern”;
src: url(Whiteboard-Modern-Demo.ttf);
}

#ozelyazitipi {
font:24px “White Board Modern”;
color:#2e83ff;
}

Css kodumuzda gördüğünüz üzere bir Css3 nimeti olan Font-Face seçicisini kullandık. Font-family alanına kullandığımız yazıtipinin ismini yazdık. Src parametresi ile yazıtipinin bulunduğu dosyanın yolunu ve tam ismini yazdık. Bu kodu yazdıktan sonra ben bir alan oluşturdum. Bu alanda font parametresi ile az önce tanımladığım yazıtipime atıfta bulunarak bunu kullanacağımı belirttim. Şimdi yazımızı gösterecek olan Xhtml kodunu da yazalım.

BU YAZI WHITE BOARD MODERN YAZITIPI ILE YAZILDI…

Burada da #ozelyazitipi olarak belirttiğimiz id’mizi kullanarak yazımızı yazdık. Dosyayı .html formatıyla kaydederek görüntülediğinizde yazımızın ekranda belirttiğimiz yazıtipinde görünecek.

(NOT: Bu özelliğin IE tarayıcılarda görülebilmesi için kullandığımız yazıtipinin Embedded Open Type olması gerekiyormuş. Burada konuyla ilgili detayları bulabilirsiniz. Bu yazıyı hazırlarken Css Fonts Module Level 3 sayfasını referans aldım.)

ÖRNEK SAYFA

Tüm Zamanların En İyi 100 Yazıtipi

webthese — Sun, 08 Mar 2009 12:48:36 +0000

Efendim, tüm zamanların en iyi ve en çok kullanılan 100 fontu burada derlenmiş. İçinde bilmediğim fontlar da mevcuttu. Gözatmanızı tavsiye ederim.

Ücretsiz Yazıtipi (Font) Kaynak Siteleri

webthese — Sat, 16 Feb 2008 22:56:23 +0000

Web tasarımı ve grafik ile uğraşan kişilerin en büyük ihtiyaçlarından birisi de Yazı Tipleridir. Farklı yazıtipleri tasarlamış olduğumuz site ve grafiklerde bizlere büyük kolaylık sağlar. Hem Masaüstü yayıncılık hem de Web yayıncılığı ile uğraşan kişilerin her zaman elinin altında bir “font” arşivi bulunur. (Zira benim de öyle bir arşivim bulunmakta ve gözüm gibi korumaktayım…) Bu yazımızda kısaca zengin ve ücretsiz yazı tipi kaynaklarını listeleyeceğiz.

dafont.com: Uzun süredir kullanmış olduğum bir font sitesi olan dafont.com farklı kategorilerde binlerce yazıtipi barındırıyor. Şu anda kendi bilgisayarımda kullanmış olduğum birçok yazıtipini bu siteden indirdim ve sizlere de tavsiye ediyorum.

urbanfonts.com: Hem ücretsiz hem de ücretli birçok yazıtipi bulabileceğiniz ve özellikle tasarımı ile göz dolduran bir site. Site hem blog hem de forum bölümlerine sahip.

fawnt.com: Hasan Yalçın sayesinde tanımış olduğum bu site 10.000 üzerinde font barındırıyor. Sade tasarımı ve kolay erişimi ile sürekli kullandığım font kaynaklarının başında geliyor.

fontcubes.com: Bu siteden de sevgili Eburhan sayesinde haberim oldu. Özellikle sitenin anasayfasında yer alan günün en çok indirilen 10 fontu ilginizi çekebilir.

betterfonts.com: Diğer sitelere nazaran daha az kullandığım ancak yine de çok sayıda kaliteli ücretsiz font bulunan başka bir site. Sitede 10.000 üzerinde font bulmanız mümkün.

DİĞER ÜCRETSİZ FONT KAYNAKLARI

Öncelikle canımız ciğerimiz Bildirgec.org’un Font kaynakları sizler için çok yararlı bağlantılar içeriyor. Bununla birlikte Smashingmagazine.com’un Font kategorisinde çok güzel bağlantılar ve font kaynakları bulabilirsiniz.

Sizlerin de kullanmış olduğu yazıtipi siteleri ve kaynakları varsa bunları yorum olarak paylaşabilirsiniz. Umarım faydalı olmuştur.