25 Nisan 2019
Home » Web Tasarım » Cufón Kullanımı

Cufón Kullanımı

Cufón genelde webmastercı arkadaşların kullandığı bir eklenti olmaya başladı. Hemen hemen gezdiğim tüm sitelerde karşıma sık sık çıkmaya başladı. Nedir bu Cufón? Ne işe yarar? neler yapılabilir? Bunları analtmak istiyorum sizlere. Açtığım konuların başlıkları dikkat ettiyseniz KOPYALANAMAZ şekilde ve RESİM olarak gösteriliyor. Bu Cufón sayesinde oluyor. Normalde tüm yazılara yapmak istedim. Kötü niyetli kişilerin sitemdeki makaleleri kendi sitelerinde sadece kopyala/yapıştır yapmasını engellerim diye. Sonradan vazgeçtim tabi. İnternet üzerinde ne kadar kod kullanırsanız kullanın, çalınmayacak/çalınamayacak hiç birşeyin olmadığını görürsünüz.Neyse gelelim Cufón kullanımına 🙂

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] <div>
<div><code><!DOCTYPE html PUBLIC </code><code>"-//W3C//DTD HTML 4.01//EN"</code></div>
<div><code>"<a href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a>"</code><code>></code></div>
<div><code><html></code></div>
<div><code>   </code><code><head></code></div>
<div><code>      </code><code><meta http-equiv=</code><code>"Content-Type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code><code>></code></div>
<div><code>      </code><code><script src=</code><code>"cufon-yui.js"</code> <code>type=</code><code>"text/javascript"</code><code>></script></code></div>
<div><code>      </code><code><script src=</code><code>"Vegur_300.font.js"</code> <code>type=</code><code>"text/javascript"</code><code>></script></code></div>
<div><code>      </code><code><script type=</code><code>"text/javascript"</code><code>></code></div>
<div><code>         </code><code>Cufon.replace(</code><code>’h1′</code><code>);</code></div>
<div><code>      </code><code></script></code></div>
<div><code>   </code><code></head></code></div>
<div></div>
<div><code>   </code><code><body></code></div>
<div><code>      </code><code><h1>Sizin metniniz burada bulunacak.</h1></code></div>
<div><code>   </code><code></body></code></div>
<div><code></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.

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…

Hakkında Emre

Galatasaraylı Bir Michael Jackson Hayranı... 1996 yılında kasa montajı ile başladığı bilgisayar serüveni onu sırasıyla notebook tamiratı, web sitesi tasarım ve yönetimi, editörlük ve danışmanlık hizmetlerine kadar getirdi, hala kıramadığı firmalarla site çalışmalarına devam etmesine karşın, sosyal medya üzerine odaklı.

Yorum yok

  1. Teşekkürler her dediğinizi yaptım ve de sonuç olumlu ama benim sormak istediğim üzerine gelince yazının rengi değişmiyor.Bunu nasıl yapabiliriz?

    • style.css dosyanızdan düzenleyebilirsiniz.

      • örneğin ; konu_baslik a stilinin rengini siyah yaptım üzerine gelince kırmızı olması için konu_baslik a:hover şeklinde ve de özelliklerinin color : red; şeklinde olması gerekmiyor mu?Ben böyle yapıyorum ama olmuyor bir türlü.

        • a:hover {
          text-decoration: underline;
          color: #990000;
          }

          örnek vermek gerekirse böyle birşey olacak sanırım denemedim 🙂

  2. teşekkürler emre abi.

  3. eline sağlık güzel olmus emre

Bir Cevap Yazın

error: