Cufón, Bir sIFR Alternatifi Hakkında Her Şey

Sitelerimizde bazen kendi zevkimize göre yazı tipleri kullanmak isteriz. Bununla birlikte çok büyük yazı karakterleri de kullanmamız gereken zamanlar oluyor. İşte böyle durumlarda en doğru çözüm bu zamana kadar sIFR teknolojisiydi fakat artık güçlü bir rakip var, şurada örneğini görebileceğiniz Cufón.

Cufón’un 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.

Cufón’un 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‘un mevcut bilinen hatalarına ve bir üst maddede bahsettiğim henüz eklenmemiş özelliklereşuradan ulaşabilirsiniz.

Cufón Kullanımı

Cufón’un gerçekten de çok basit bir kullanımı var. 3 adımda nasıl kullanacağınızı özetleyebiliriz.

  • Öncelikle Cufón’un temelini oluşturan Javascript dosyasını (cufon-yui.js) şuradan indiriniz ve uygulamanızın dizinine yükleyin.
  • Ardından kullanmak istediğiniz yazı tipini Windows/Fonts klasörü dışında bir klasöre yükleyin. Dosyanın seçilebilmesi için bu işlemin yapılması gerekiyor. Ardından şuradaki dönüştürücüye gidin ve yazı tipinizi bilgisayardan seçerek yükleyin. Dönüştürücü sayfasındaki gerekli işaretlemeleri/ayarları yaptıktan sonra işlemi başlatın. Dönüştürme işlemi bittiğinde size yazı tipinin ismini taşıyan bir Javascript dosyası verilecek (Ör. Myriad_Pro_400.font.js). Bu dosyayı da uygulama dizininize yükleyin.
  • Son olarak uygulamanızın en üstünde aşağıdaki gibi bir kod ile yüklemiş olduğumuz iki Javascript dosyasını çağırın ve dönüştürülmesini istediğiniz seçiciyi belirleyerek koda yazın.
<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>

Yukarıda yaptıklarımızı tam bir sayfa içinde göstermemiz gerekirse şöyle bir kod bütününe sahip oluruz.

<!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>Sizin metniniz burada bulunacak.</h1>
	</body>
</html>

Uyarılar

Bu yazıyı yazma nedenim öncelikle böyle bir çalışmadan/teknikten haberdar olmanız. Elbette Cufón henüz sIFR kadar sağlam değil fakat doğru ve hızla bir şekilde gelişmekte olduğu çok açık.

Eğer uygulamalarınızda Cufón kullanacaksanız mutlaka dosyalarınızı UTF-8 dil kodlamasında derlemeli ve sayfanızın dil kodlamasını UTF-8 yapmalısınız.

Cufón yazı tipi dönüştürücüsünde bir yazı tipini işleme koyarken “.. and also these single characters” şeklinde başlayan kutuya şu Türkçe karakterleri girmeyi unutmayın. ğĞçÇöÖıİüÜşŞ

Bir üstteki maddeye ek olarak The EULAs of these fonts allow Web Embedding (without Adobe Flash) yazan kutu ile I acknowledge and accept these terms yazan kutuyu mutlaka işaretlemlisiniz.

Cufón Örnekleri

Aşağıdaki sayfalarda Cufón kullanılan birbirinden güzel örnekler bulabilirsiniz.

Sonuç

Cufón gerçekten güzel bir proje ve ilerde iyi bir yerlere geleceğini tahmin ediyorum. Türkçe karakterler konusunda kararlı bir yapıda olmadığını sezdim. Sezdim diyorum çünkü kullandığım yazı tipinden kaynaklanan hatalar da olabilir. Dileğim ise sIFR‘dan daha hızlı ve çok daha kolay kurulan sağlam bir sistemin ortaya çıkması. Cufón ile en azında bu konuda çalışmalar olduğunu ve mevcut sıkıntıların giderilmeye çalışıldığını görmek bile beni mutlu ediyor.

Daha yeni, kararlı ve sağlam Web Teknolojilerinde görüşmek dileğiyle…

Kaynaklar

Benzer Yazılar

yakuter

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Bu Yazıya Ait Yorumlar

Yiğit Özdamar

Yiğit Özdamar
22 Mayıs 2009

Makalenin başında Flash değil de Javascript dedin ya, işte o an zıplayasım geldi. :) Ne var ki okumaya devam ettikçe bu sistemi de şimdilik kullanmayacağımı farkettim (Eksiklerinden ötürü). Teşekkürler Erhan.

S4l1h

S4l1h
22 Mayıs 2009

Güzel bir yazı Erhan Abi. Bende bunu sIFR’a alternatif olarak duymuştum ama ilgilenmedim. Sayende bilgileniyoruz. Teşekkürler.

yakuter

yakuter
22 Mayıs 2009

Biliyorum ki bu tür şeyleri araştırmak, test etmek, bize uygun olup olmadığını belirlemek zaman alan şeyler. Ama birisinin de bunu yapıp sonuçlarını yazması lazım. Bazı sorularınıza yanıt verebildiysem ne mutlu. İlerde yeni gelişmeler oldukça haberdar etmeye çalışırım.

Emre YILMAZ

Emre YILMAZ
23 Mayıs 2009

Seo düşmanı gibi duruyor. Grafiğe çevirip kullanmak pek fark oluşturmuyor cufon için. Çünkü grafiğe dönüştüren pek fazla js kodu mevcut ki php ile de aynı işlem yapılabiliyor zaten.

yakuter

yakuter
23 Mayıs 2009

@Emre, SEO konusunda yanılıyorsun çünkü bu PHP’nin grafiğe çevirmesinden farklı bir olay. Çünkü arama motorları kodlara bakar ve sen Cufon olan bir sayfaya sağ tıklayıp kaynağı görüntüle dediğinde orada hâlâ kod olarak istediğin metnin yazdığını görürsün. Sadece tarayıcıda görünürken resim gibi görünür.

Sonuç olarak bize resim olarak görünür, arama motorlarına metin olarak. İşte bu açıdan baktığında fark oluşturuyor çünkü diğer teknikler gibi doğrudan resme dönüştürmüyor.

SNaRe

SNaRe
24 Mayıs 2009

Evet gerçekten güzel yöntemmiş.
SEO açısından araştırdım biraz
http://www.google.com.tr/search?hl=tr&q=site%3Ahttp%3A%2F%2Fwww.cameronmoll.com%2Farticles%2Fcufon%2F+testing+ff
Şu sayfayı aradığınızda cufon la yazılmış başlığı direk google da görebiliyorsunuz.
Ayrıca kaynak kodda herhangi bir kodda görünmediği için sayfa boyutuda küçük görünüyor.
Biraz daha geliştirildikten sonra çok ünlü olacağına eminim. Teşekkürler erhan

Kadir GÜNAY

Kadir GÜNAY
25 Mayıs 2009

Merhaba Erhan,

Uzun zamandır sIFR kullanan birisi ve ciddi anlamda hatalarını gördükçe nefret eden birisi olarak yeni yeni farklı yönlerde arayışlar içindeydim. Typeface.js’ yi denedim ilk fakat embed edilen yazı tiplerinin oluşturduğu js lerin boyutunu görünce “Yok Artık!” dedim :) 1-2 gündür Cufón ile iglili testler yapıyordum. Bana kalırsa gayet kullanışlı. Eksikleri olması normaldir. Şu an için bu alternatifler içinde en kullanışlısı olarak gözükmekte.

Ayrıca google açısından kendi fikrimi belirtmek gerekirse, düzenlenen metnin yerine imaj basması çok sorun olmayacaktır. Hali hazırdı size zaten html kodlarına imaj değil metin giriyorsunuz :)

Makale için teşekkürler Erhancım

Levent Bali

Levent Bali
25 Mayıs 2009

Cufón sanılanın aksine fare ile seçilebiliyor. Sadece üstü mavi olmuyor textlerdeki gibi. Seçip ctrl+c yaparsanız görebilirsiniz.

OFY

OFY
28 Mayıs 2009

Bu konuyu daha önceden düşünmüştüm, Flash desteği olmadan farklı yazı tipi… Herzamanki gibi güzel bir paylaşım olmuş

yakuter

yakuter
28 Mayıs 2009

@Levent, teşekkür ederim eklemen için. Bunu bilmiyordum.

SEFA AYDIN

SEFA AYDIN
29 Mayıs 2009

Hayatımızı kolaylaştırmak için sürekli birileri çalışıyor. bu güzel bişey. Keşke benimde fazla bilgim olsa ve takım arkadaşlarım olsa da bende birileri için çalışmalar yapsam. ne grur verici birşey olurdu. Biz türk milleti olarak sanırım biraz tembeliz. herşeyin hazırını istiyoruz. (bazende düşünüyorum eğitim sisteminden mi kaynaklı)

ellerine sağlık YakutEr (abimi demeliyim bilmiyorum =) böyle bir teknolojiyi bize sunduğun için…

iyi çlışmalar…

yakuter

yakuter
30 Mayıs 2009

Bir yanlış anlama olmasın, bu benim yapımım olan bir çalışma değil. Ben sadece test edip inceledim ve değerlendirmemi yazdım ;)

Kaan Şengül

Kaan Şengül
31 Mayıs 2009

Bugünlerde yaptığım küçük bir çalışmada Cufon’un ne denli güzel olduğunu gördüm :)

http://proje.gkaans.org/anasayfa/

SEFA AYDIN

SEFA AYDIN
31 Mayıs 2009

sonuçta araştırıp uygulamasını yapmışsınız. Siz olmasaydınız ben bunu bilemeyecektim. yada çok geç öğrenecektim..

Eray USTA

Eray USTA
01 Haziran 2009

Teşekkürler hocam incelemeniz ve anlatımınız için. :)

Ahmet

Ahmet
27 Haziran 2009

Çok güzel bir mantık ile çalışıyor Cufón. Web sitesi hazırlayanlarda çok büyük kolaylıklar sağlıyor. Ancak ben yukarıdaki ayzıyı okuduktan sonra Cufón ile ilgili bir örnek çalışma hazırlayamadım. Bütün adımları eksiksiz yaptım ama bir türlü yazıyı erkanda göremedim. Yardımcı olur musunuz?

Alican

Alican
14 Temmuz 2009

tşk ederımmm

InterRamcho

InterRamcho
20 Temmuz 2009

Usta,bu aynı zamanda emek hırsızlığını da zorlaştırır.Eğer tüm yazılar cufon ile olursa,yazılar kopyala-yapıştır edilemez,resim olarak da paylaşamazlar.İyi oldu bu iyi,ayrıca sIFR’a göre süper-hızlı denebilir(sayfanın tamamı baz alınırsa).

InterRamcho

InterRamcho
20 Temmuz 2009

Eğer wordpress temasında kullanacaksanız,her sayfada göstereceksiniz ama size uygun etiketi bulamadıysanız(h1,h2… yetmiyorsa seçenekler) kendiniz yeni etiket yaratıp kullanabilirsiniz.
Lorem ipsum dolor da ne?
Bunun için header’da Cufón’un geçerli olduğu etiketler kısmına:

Cufon.replace('interramcho');

eklemeniz yeter.Beni Cufón ile tanıştırdığın için teşekkür ederim Erhan Abi(Yani abi derim herhalde:) )

InterRamcho

InterRamcho
04 Ağustos 2009

Cufon.replace('a');
Bu kodu eklediğimde linkle o fontta gözüküyor fakat menü,listeleme vb. yerleri bozuyor.Bunu nasıl engellerim?

yakuter

yakuter
09 Ağustos 2009

sadece a demek yerine “.ust a” veya “a.baglanti” şeklinde daha belirli bir seçici kullanmayı deneyin.

Enes

Enes
06 Eylül 2009

Bilgilendirme için çok teşekkürler , çok işime yaradı ^^

ShadowOfThieves

ShadowOfThieves
07 Eylül 2009

Çok Güzel Bir Bİlgi Paylaşmışsın Çok Teşekküürler.

sinan

sinan
02 Kasım 2009

hocam türkçe karakterlerde ş ve Ş eksik kalmış, benim gibi kopyala yapıştır yapanlar için eklerseniz iyi olur :)

Fallar

Fallar
10 Aralık 2009

hocam elinize sağlık gerçekten iyi anlatım…

Seyit

Seyit
26 Aralık 2009

Ya sabahtan beri benim css’te ne var da Türkçe karakterleri göstermiyor diyordum. Demek ki bu zımbırtı varmış :D hocam çok sağolun

oyun

oyun
27 Aralık 2009

paylaşım için teşekkürler çok işime yaradı =)

sohbet

sohbet
06 Şubat 2010

Elerrinize sağlık zevkle okudum makalenizi, Amatör bir web tasarımcı olarak sizin açtıgınız konuları okumak ve yeni şeyler öğrenmek bana zevk veriyor. Yazma ilhamınız baki olsun. Görüşmek dileğiyle.

yakuter

yakuter
07 Şubat 2010

Çok teşekkür ederim. Mutlu etti yorumunuz beni :)

Cufon nedir? Nasıl kullanılır? | shubo.org

Cufon nedir? Nasıl kullanılır? | shubo.org
10 Şubat 2010

[...] Bu yazının orjinali http://www.yakuter.com/cufon-bir-sifr-alternatifi-hakkinda-her-sey/ adresindedir. AKPC_IDS += [...]

emir

emir
04 Mart 2010

gerçekten elinize yüreğinize sağlık. tasarım işine yeni başlayan biri olarak, ben de zevkle okudum ve anladım. bundan sonra da sizi takip etmeye devam edeceğim. çalışmalarınızda başarılar ve devamlılık diliyorum. Saygılar…

aydın

aydın
13 Nisan 2010

allah razı olsun valla büyük bi dertten kurtuldum

fulya

fulya
05 Temmuz 2010

IE6 denedim ama fontu görmedi bütün tarayıcılarda sorunsuz çalıştığından emin misiniz ?

yakuter

yakuter
05 Temmuz 2010

Fulya, şu sayfada hangi tarayıcılar tarafından desteklendiği yazıyor. Ona istinaden yazdım yoksa tüm tarayıcıları kurup hepsinde tek tek deneme yapmadım malesef.
http://wiki.github.com/sorccu/cufon/browser-suppo...

intermetre

intermetre
15 Temmuz 2010

Ben son çıkan sIFR 3.0 versiyonunu kullanıyorum. Bence eski sürümlere göre oldukça kararlı çalışıyor. Birçok kolaylığıda beraberinde getirmiş durumda. Bencde bu tekniği kullanan arkadaşlar mutlaka sIFR 3.0 a bir göz atmalı.

M.Keskinoglu

M.Keskinoglu
27 Temmuz 2010

Çok Süper Bir Yazı Olmuş. Evet Çoğu Tasarımlarda UTF Olmadığından Büyük Sorunlar Oluyordu. Sayenizde Çözdüm.

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi). Hosting sponsoru WebGrup.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPressValid XHTML 1.0 TransitionalBu web sitesi ne kadar popüler?php