Css3 font-face Seçicisiyle Özel Yazıtipi Kullanmak
(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.
<div id=”ozelyazitipi”>
BU YAZI WHITE BOARD MODERN YAZITIPI ILE YAZILDI…
</div>
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.)
Rastgele Yazılar
Css3 font-face Seçicisiyle Özel Yazıtipi Kullanmak yazısı için 11 yorum yapılmış...
Yorumunuzu Yazın
css3 ile gelen sen sevindiğim yeniliklerden biri. güzel yazı olmuş eline sağlık :)
Anlatım için teşekkürler
çok güzel bir uygulama, paylaştığınız için teşekkür eder, zafer bayramınızı kutlarım..
Teşekkür ederim arkadaşlar. Sizlerin de 30 Ağustos Zafer Bayramı kutlu olsun.
Arkadaşlar,
@font-face CSS3′ün değil, CSS2′nin nimetidir. İlk zamanlarda sadece Safari destekliyordur bu tekniği. Bu sebeple yanlış biliniyor.
@Yiğit haklısın css2′de bu özellik vardı. Ancak True Type fontları destekleyen tarayıcı sadece Safari’ydi. Internet Explorer ise sadece Embedded type’ları destekliyordu. W3C’nin 2009′daki son Working Draft’ında Level 3 olarak yeniden duyurulunca insanlar bir anda bu özelliği daha fazla kullanma ihtiyacı hissettiler. Özellikle Firefox’un bu parametreyi desteklemesi büyük bir avantaj oldu.
Keşke yazıda bunu belirtseydim, uyarın için teşekkür ederim.
Rica ederim. Bence belirtmekte geç kalmış değilsin. Düzeltme adı altında eklemeler yapman bence hoş olur.
İyi çalışmalar.
Buradaki yazımdan fontlarınızı EOT uzantısına çevirmeyi anlattım. Belki işinize yarar. :)
@İbrahim yazınızı inceledim hoş bir gönderi olmuş. Elinize sağlık :)
bu font- face’ i blogger da kullanmak mümkün mü?
Elbette kullanabilirsiniz. Tek olay source olarak font dosyanizi uzaktaki bir alanda belirtmektir.