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.
Bu yeni tekniği özel ve farklı kılan bazı hususlar şunlar.
Cufon.now() kullanılıyor. İlerde bu koda da ihtiyaç duyulmayacağı söyleniyor yapımcıları tarafından.Cufón’un gerçekten de çok basit bir kullanımı var. 3 adımda nasıl kullanacağınızı özetleyebiliriz.
<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>
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.
Aşağıdaki sayfalarda Cufón kullanılan birbirinden güzel örnekler bulabilirsiniz.
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…
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.
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
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
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
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
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
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
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
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
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ş
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
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
31 Mayıs 2009
Bugünlerde yaptığım küçük bir çalışmada Cufon’un ne denli güzel olduğunu gördüm :)
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..
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?
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
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
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
09 Ağustos 2009
sadece a demek yerine “.ust a” veya “a.baglanti” şeklinde daha belirli bir seçici kullanmayı deneyin.
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 :)
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
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.
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
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…
fulya
05 Temmuz 2010
IE6 denedim ama fontu görmedi bütün tarayıcılarda sorunsuz çalıştığından emin misiniz ?
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
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
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.
Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.
menchek
02 Eylül 2010
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.