Yakuter
Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

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

3 min read

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.

[php]<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>
[/php]

Yukarıda yaptıklarımızı tam bir sayfa içinde göstermemiz gerekirse şöyle bir kod bütününe sahip oluruz.
[php]<!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>[/php]

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.

  • Cameron Moll’s comprehensive cufón test pages
  • 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
  • bed buzz using cufón for nav and headings
  • 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

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

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer
«
»

Bootstrap’te Borderless (Sınırları Olmayan) Table Oluşturmak

Erhan Yakut
Jan 30, 2018 15 sec read

Websitede Sağ Tuşu ve Seçme (Highlight) İşlemini Engelleme

Erhan Yakut
Jan 27, 2018 54 sec read

WooCommerce Sepete İki Defa Ürün Eklenmesi Sorunu

Erhan Yakut
Dec 3, 2017 2 min read

64 Replies to “Cufón, Bir sIFR Alternatifi Hakkında Her Şey”

  1. 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.

    1. 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.

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

  3. 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.

    1. @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.

  4. 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

  5. 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

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

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

  8. 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…

    1. 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 ;)

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

  12. Ç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?

  14. 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).

  15. 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:) )

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

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

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

  21. 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

  23. 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.

  24. 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…

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

  27. 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ı.

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

  29. 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

  31. 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

  32. 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.)

  33. 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.

  35. 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?

  36. 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 ?

    1. Ş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' });

  37. 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 ?

  38. 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 :)

  39. yakuter hocam, benim soruma cevap vermemişsiniz. Rica etsem yardımcı olabilir misiniz? Firefoxta görünmüyor textlerim :(

  40. 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?

  42. 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.

    1. 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.

  43. 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?

  44. 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

  45. Hocam Merhaba,

    Anlatım için teşekkürler öncelikle. Sorumsa Cufon kullanıyorum localde baktığımda helvetica çalışırken hosta yüklediğimde alakasız bir karakterin çıkması. Bunu nasıl çözebilirim ?

    <script src="http://code.jquery.com/jquery-1.7.1.min.js&quot; type="text/javascript"></script>
    <script src="http://cufon.shoqolate.com/js/cufon-yui.js&quot; type="text/javascript"></script>
    <script src="js/Helvetica_Neue_300.font.js" type="text/javascript"></script>
    <script type="text/javascript">
    Cufon.replace('h6');
    </script>

    kodum. Şimdiden teşekürler.

  46. yok gençler aman cufon mu ne uzak durun :) verem etme aracından başka bişey değil,yok kullanacaksanızda sitenize girenlere IE kullanmayın felan deyin artık , ikisi yanyana durmuyor :)

  47. @erhan hocam peki ben tüm herşeyi yaptım fakat siteye girerken önce eski karakter geliyor sonra cufon ile yaptığım bu normalmidir?

  48. Çok güzel paylaşım teşekkürler. Fakat ben bir sorunla karşılaştım. Font bulanık gözüküyor bunun nedeni ne olabilir yardım ederseniz sevinirim. Chrome'da bulanık gözüküyo diğerlerinde normal.

  49. Merhaba, ben daha olayin basinda takildim:) Butun gerekli dosyalari ve font cevirme islemlerini yaptim.

    (cufon-yui.js) dosyasini indirdim ama uygulamamin dizini neresi bilmedigim icin yukleyemedim.
    Yazdiginiz kodlarda degistirmek istedigim alanlari -ornegin blog basligi kayit basligi gibi- nasil belirtmeliyim? Bzen h1 h2 h3… gibi belirtmelerde oluyor ama bunlar nereyi isaret ediyor bilemiyorum?
    Ayrica UTF-8 dil kodlamasına nasil gecebilirim.

    Karsinizda ciddi bir caylak var simdiden cok tesekkur ederim.

    1. Merhabalar,

      Bu sorularınıza bir anda cevap vermek zor. Öncelikle tema yapısını bilmeniz lazım. Bunu öğrendiğiniz zaman javascript dosyalarının (.js uzantılı olanlar) temanın içindeki /js gibi bir klasöre konulması gerektiğini, h1, h2 gibi etketlerin tema içindeki index.php gibi dosyalarda bulunduğunu göreceksiniz.

      UTF-8 ise bambaşka bir mevzu. Sorunuzu bile tam olarak anlayamadım ama şu makalem yardımcı olabilir belki.
      http://www.yakuter.com/utf-8-bom-byte-order-mark-…

  50. Merhaba,

    Flash teknolojiklerden fazla hoşlanmıyorum. Ne kadar dinamik olursa olsun. Ama konu anlatımı çok iyi olmuş. Teşekkür ederiz.

  51. şöyle Bir Yardıma İhtiyacımm Var Kullandığım Sprictte Cufon Modu Var.
    Cufon.replace('.content_right h2.dotted', { fontFamily: 'Liberation Serif', textShadow:'0 1px 0 #FFFFFF' });
    Kod Bu Ama Ben YanLız Yazı Başlıklarında Kullanmak İstiyorum Cufonu Kullanmak istediğim Yazı stili ise. Neuropolitical Bana Sıfırdan Anlatırmısınız İnanın Saatler geçti Kafam Basmadı.
    Bu Kodda Neresinde Değişiklik yapmalıyım
    Cufon.replace('.content_right h2.dotted', { fontFamily: 'Liberation Serif', textShadow:'0 1px 0 #FFFFFF' });

Leave a Reply

Your email address will not be published. Required fields are marked *