1183 takipçi
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?
Alican
14 Temmuz 2009
tşk ederımmm
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.
Karamacam
13 Eylül 2010
Tasarımcı değilim. Yalnızca kendi kendime bişeyler öğrendim ve ufak tefek bişeyler yapıyorum. Hazır css buldum bir yerden ve üzerinde oynayarak bir web sitesi yayınladım. logo konusunda yaşadığım bir sıkıntıda logo ve fontları jpeg olarak kaydedip img attım. Gördüm ki flulaşıyor, bozuluyor. Tam zamanında bu yazıyı buldum. uygulamaya çalışacağım. umarım başarılı olurum :)
Teşekkürler
Emrah Öztürk
22 Eylül 2010
cufon kullanırken Türkçe dil desteğinde sorun yaşayanlar için çok hoş bir site tavsiye edeceğim. Pek çok dilde destek veriyor. Şahsen çok işime yaradı.
Ayrıca Erhan bey sizede teşekkür ederim.
http://www.cufonfonts.com/tr
volkan
01 Ekim 2010
merhabalar güzel bir anlatım olmuş, bende kullanmış olduğum temada türkçe karakter sorunu yaşıyorum. anlatmış olduğunuz formülü denedim fakat lets tho this dediğim vakit aşşağıdaki gibi bir uyarı alıyorum, bu neden kaynaklanıyor sizce?
(The file you uploaded could not be converted. Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported.
If you're sure the font is valid, it is likely that the author of the font has decided to not allow modification and/or embedding of the font. This can happen quite often especially with "freeware" TrueType fonts. You must contact the author of the font for a less restricted version.
Some files (especially old Mac PostScript fonts) require pre-processing that cannot be done on the server. For more information please read Trouble with font files.
Tip: did you upload an AFM or a PFM file? They only contain font metrics information which is not quite what we need. There should be a PFA or a PFB file with the same name in the same folder, which contains the actual glyph data. If there isn't, your font manager probably stashed it away somewhere, in which case you're going to have to hunt it down yourself. Once you've found the correct file you should be able to convert it with no trouble at all.)
Yasin
07 Ekim 2010
Arkadaşlar, benim uygulamamda Firefox'da metinler görünmüyor. Firefox için bir problem var fakat ben nedenini çözemedim. Deneyen arkadaşlardan yardım rica edebilir miyiz? Hepinize teşekkür ediyorum.
Yasin
13 Ekim 2010
Arkadaşlar, benim uyguladığım biçimde IE dışında herhangi bir browserdar harfler yok görünüyor yani görünmüyor. Sebebini bilen bir arkadaşım varsa yardımcı olabilir mi?
Firat Abak
26 Ekim 2010
Usta Ellerine Sağlık Harika Olmus ama ben bunlara hover efekti sağlamak istiyorum yani üzerine geldiğimde font kırmızı olsun gibisinden bu mümkün mü ? mümkünse nasıl yapabilirim bunu ?
yakuter
26 Ekim 2010
Şu şekilde kullanabilirsin. Böylece CSS ile hover efekti verdiğin bağlantılar dilediğin gibi çalışacaktır ;)
Cufon.replace('.us_menu a', { fontFamily: 'Helvetica', hover: 'True' });
Firat Abak
26 Ekim 2010
Hocam Dediğinizi Ben Yapamadım,
şimdi benim js dosyamda şu kodlar ile fontları çağırabiliyorum
Cufon.replace('.icerik h1 a');
bu kodda daha ne gibi bir değişiklik yapmam gerekiyor ?
yakuter
26 Ekim 2010
Tamam işte, şu şekilde dene o halde ;)
Cufon.replace('.icerik h1 a', {hover: 'True' });
Firat Abak
26 Ekim 2010
Usta Allah Senden Razı Olsun,Şimdi Anladım Ben Olayı Ben Şu Şekil Yapıyordum
Cufon.replace('.icerik h1 a');
Cufon.replace('.icerik h1 a', {hover: 'True' });
2 Kere Yazıyordum demekki 1 defa yazılacakmıs Eyvallah Çok Sağol :)
Yasin
27 Ekim 2010
yakuter hocam, benim soruma cevap vermemişsiniz. Rica etsem yardımcı olabilir misiniz? Firefoxta görünmüyor textlerim :(
Yasin
02 Kasım 2010
yakuter hocam, yönlendirmelerin sayesinde sorunumu çözdüm teşekkür ederim yardımların için. Fakat şimdi de IE ile FF arasında görünüm olarak style tabanlı bazı problemler bulunuyor. IE h3 tagına atadığım stilleri alırken, FF o stil değerlerini almayıp jkafasına göre bir gösterim sergiliyor. Sonuç olarak IE'de istediğim font büyüklüğünde görünen textler, FF ve diğerlerinde daha küçük olarak görünüyor. Gözden kaçırdığım bir şey mi var acaba?
ugur aslan
07 Kasım 2010
hocam eline saglık
yusuf
14 Kasım 2010
Normal bir metinden biraz daha sonra geliyor sanki. Türkçe karakter sorunlarına biraz daha pratik bir çözüm bulunabilse daha güzel olur.
yakuter
27 Kasım 2010
Eğer oluşturacağınız js dosyasının boyutunu küçük tutarsanız daha hızlı bir dönüşüm elde edebilirsiniz. Türkçe karakter çözümü bana kalırsa oldukça pratik ama yine de kişiye göre değişir tabi.
beat
01 Ocak 2011
hocam sitemde bu özelliği kullanmaya başladım. Fakat internet explorer 7'de sadece ilk haberde cufon çalışıyor. Daha sonraki haberlerde cufon çalışmıyor. Nedeni nedir acaba?
Çağatay Gülümser
12 Mart 2011
Dediklerinin hepsini yaptım çok güzel oldu zaten biliyordum fakat wordpresste ilk defa yapıyorum. Neyse sorun şu ki: ana sayfada cufon gözüküyor fakat herhangi başka bir sayfaya geçtiğimde işlemiyor yardımcı olur musunuz
Cufon nedir? nasıl kullanılır ? (computer user font) at Hayat-ıWeb
19 Haziran 2011
[...] Orjinal Makale için http://www.yakuter.com/cufon-bir-sifr-alternatifi-hakkinda-her-sey/ [...]
Cufón, Bir sIFR Alternatifi Hakkında Her Şey | Erol ERGUL
23 Haziran 2011
[...] 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. ? [...]
Yakuter web tasarım, yazılım geliştirme, IPhone uygulamaları gibi konular da Üreticy'yi öneriyor.
ClipFinder HD, en ünlü 15 video paylaşım sitesi üzerinden video arayıp indiren ve format dönüştüren ...
G Data TotalCare bilgisayarınızda sağladığı tam kapsamlı güvenlik yanında optimizasyon araçlarıyla s...
G Data InternetSecurity anti-virüs, anti-casus, anti-spam anti-rootkit korumalarının yanında progra...
Performans problemi yaşamadan virüslerden korunmanızı sağlayan G Data AntiVirus, bilgisayarın aktif ...
Multiplayer oyun severlerin en çok ihtiyaç duydukları iletişim araçlarını içinde bulunduran ve onlin...
Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.
yakuter
03 Kasım 2011
UfukArt
01 Kasım 2011
yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi).
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.