Web geliştirici arkadaşlar bilir internet sitelerinde farklı fontlar kullanmanın zorluklarını. Bunun için çeşitli yöntemler vardır ama hepsi sorunlar çıkartır. Bunların arasında en çok ön plana çıkan cufondur. Sitelerin güzel gözükmesindeki en büyük etkenlerden biriside yazı karakterleridir. Büyük şekilli yazılar siteyi daha canlı gösterir. Bu yazımızda cufon kullanarak sitemizi daha güzel hale getirmeyi anlatacağım. Umarım yardımcı olur.
Öncelikle web sitemizde kullanacağımız yazı fontunu şu adrese yüklüyoruz Tıkla daha sonra birkaç özellik katmamız gerekiyor. bunlardan bir tanesi türkçe karakter. Öncelikle fontumuz türkçe karakter desteklemesi gerekiyor. Sayfanın biraz altında “.. and also these single characters” buraya türçe karakterlerimizi yazıyoruz “ğĞçÇöÖıİüÜşŞ” böylelikle tükçe karakteride desteklemiş oluyoruz. Son olarak kutucuklarıda işaretliyoruz ve onaylıyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.set(‘fontFamily’, ‘Colaborate-Thin’);
Cufon.replace('h1,p,');
Cufon.set(‘fontFamily’, ‘Colaborate-Medium’);
cufon.replace ( ‘h3, #icerik, .header’ )
</script>
</head>
<body>
<h1>Başlık veya İçerik Alanı</h1>
<p>>Başlık veya İçerik Alanı</p>
<div class=”header”>>Başlık veya İçerik Alanı</div>
<div id=”icerik”>>Başlık veya İçerik Alanı</div>
</body>
</html>
yukarıda cufon.set olarak yaptığımız kısım yazı fontunun hangi özelliğini nereye vereceğimiz ilk cufon.set yazının thin ikincisi ise yazının medium özelligini alan yerlerdir. bunu italic, bold diye çeşitlendirebiliriz. Cufon kullanımı kısaca böyledir. Basit ve kaliteli bir olaydır.
Son olarak aşağıdaki siteye girerek tüm türkçe karakterli cufon fontları hazır biçimde bulabilirsiniz.
Cufon Kullanıcıya Sağladığı Olumlu Özellikler ( Artıları )
Bu yeni tekniği özel ve farklı kılan bazı hususlar şunlar.
- sIFR
gibi
Flash
dosyası kullanmak yerine
Javascript
dosyası kullanır. Böylece görüntülenmesi normal bir metnin görüntülenmesi kadar hızlıdır.
- Kendi dosyaları dışında hiçbir eklentiye ihtiyaç duymaz.
- Oldukça kolay ve kısa süren bir kurulumu vardır.
- Tüm tarayıcılarda sorunsuz bir şekilde çalışır.
- Dönüştürmüş olduğunuz yazı tipi dosyasını sadece belirli bir alanadında çalışacak şekilde düzenleyebilirsiniz. Böylece ücretli yazı tiplerini veya başkasının kullanmasını istemediklerinizi çalınma korkusu olmadan güvenle sitenizde kullanabilirsiniz.
- Yazı tipi dönüştürme sırasında Türkçe karakterleri de ekleyebilirsiniz. Böylece Türkçe karakterler konusunda sıkıntı yaşamazsınız.
- Yazı tipinizi dönüştürürken dosyanın kalite oranını seçerek ortaya çıkacak Javascript dosyasının küçük olmasını ve böylece sisteminizi kasmamasını sağlayabilirsiniz.
Cufon Kullanıcıya Olumsuz Özellikler ( Eksileri )
- Metinler dönüştürüldüğünde bir resim gibi görünmekte ve bu nedenle seçilememektedir.
- Internet Explorer’da da düzgün çalışmakta fakat bunun için tek satırlık ek bir kod
Cufon.now()kullanılıyor. İlerde bu koda da ihtiyaç duyulmayacağı söyleniyor yapımcıları tarafından.
- Hâlâ tüm CSS özelliklerini desteklememekte fakat tamamlanmasına çok az kalmış.
Cufón Örnekleri
Aşağıdaki sayfalarda Cufón kullanılan birbirinden güzel örnekler bulabilirsiniz.
- David Y’s example demonstrating some of the basic functionality
- Heather Rose Makeup Artistry’s blog links, italic text, and heading replacement w/ multiple fonts on page
- bedmgmt using cufón for nav and headings
- SilQ using cufón for nav and headings
- ehrlich werben using cufón for nav and headings
Toplam 15 Kez Okundu.