Cufon Kullanımı

// Aralık 25th, 2009 // JavaScript


Cufon sitedeki yazıların fontlarını canvas tekniği ile değiştiren sIFR alternatifi bir js kütüphanesidir.

Cufon

  • Bir JavaScript kütüphanesi olduğundan client tarafına indirildikten sonra sayfanın hazır olmasını bekler ve çalışır.
  • sIFR e göre daha hızlıdır, hız testi için tıklayınız.
  • Kaynak kodda değişiklik yapılmadığından Google dostudur.
  • Tüm browserlarda sorunsuz çalışır.
  • Kullanımı kolay olduğundan bir satırlık kod ile sitenizdeki istediğiniz yerlerin fontlarını değiştirebilirsiniz.

Cufon’u kullanmak için öncelikle kullanmak istediğiniz fontu, font oluşturucu sayfasındaki forma yüklüyoruz sonuç olarak bize bir sıkıştırılmış js dosyası döndürüyor.

Evet fontumuzu Cufonun okuyacağı şekile getirdikten sonra Cufon indirip önce Cufon eklemtisini sonra da font oluşturucudan oluşturduğumuz js pluginini sayfamıza dahil ediyoruz.

Şimdiye kadar ne yaptık.

  1. Cufonu neden kullanmalıyım sorusuna cevap bulduk.
  2. Cufonu kullanmak için hangi adımlarda neler yapmalıyız sorusuna cevap bulduk

ve son adım. .

sitenizde herhangi bir kütüphane kullanıyorsanız jQuery, mootools, ext vs. gibi bu kütüphanelerin ready fonksiyonlarına

Cufon.replace(‘selector’);

şeklinde bir fonksiyon atamamız gerekmektedir.

Selector mantığı kütüphanelerdeki selector mantığı gibidir.

Örneğin.

Cufon.replace(‘a,p,span,h1,h3′);

Sayfamızdaki a, p, span, h1, ve h3 elementlerini Cufonlamış olduk.

Daha özel örnek vermek gerekirse.

Cufon.replace(‘div#a.b h4.c’);

Burada da sayfamızdaki a id’sine sahip aynı zamanda da b classına sahip bir div elementinin içerisindeki c classına sahip bir h4 elementini Cufonlamış olduk.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<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.replace('h1');
		</script>
	</head>
	<body>
		<h1>This text will be shown in Vegur.</h1>
	</body>
</html>

Birden fazla font kullanmak için replacement fonksiyonumuza hangi selectorler için hangi fontu kullanmamız gerektiğini
belirtmemiz gerekmektedir. Bir örnekle açıklayacak olursak.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<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 src="Myriad_Pro_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
                        Cufon.replace('h1', { fontFamily: 'Vegur' });
			Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
		</script>
	</head>
	<body>
		<h1>This text will be shown in Vegur.</h1>
		<h2>This text will be shown in Myriad Pro.</h2>
	</body>
</html>

Sonuç olarak Cufon sIFRe alternatiftir fakat sIFR kadar kaliteli sonuçlar üretemez. Cufon için kullanmak istediğiniz
fontlarda türkçe karakter bulunduğuna emin olun. İyi Cufonlamalar :)

Leave a Reply