Web’de Yazı Tipi Özgürlüğü

Problem

Web sitenizde kullanabileceğiniz yazı tiplerinin çok sınırlı olması. Yıl 2009 olmasına rağmen ne yazık ki öyle bir sınır var.

Günümüzde bir sürü işletim sistemi ve bir sürü tarayıcı var. Her işletim sistemlerinde aynı yazı tipinin (font) yüklü olmadığını düşünmek çok da zor bir şey değil. Günümüzde birden fazla yazı tipi standardı olduğunu öğrenmek de kimseyi şaşırtmayacaktır.

Hal böle olunca, tüm işletim sistemlerinde ve tarayıcılarda aynı (en azından benzer) görüntüyü elde edebileceğiniz yazı tipi sayısı çok sınırlı kalıyor. Sadece temel web fontları olarak adlandırabileceğimiz sayılı yazı tipleri, ya da eşlenikleri (neredeyse) tüm işletim sistemlerinde mevcut.

Bu “güvenle kullanabileceğimiz” yazı tiplerine buradan veya resim dosyası halinde buradan göz atabilirsiniz.

Ancak koca internet dünyasının bu kadarcık yazı tipi ile sınırlı olmasını kimse bekleyemez tabi. Herhangi bir yazı tipini tarayıcı ve işletim sistemi fark etmeksizin web sitelerinde kullanılabilmesi için çeşitli yöntemler geliştirilmiş.

Bu yazıda bu yöntemlerden @font-face, sIFR, FLIR, Cufón ve Typeface incelenecek. Yazının hazırlanmasında emeği geçen bir sürü kaynağı da en sonda bulabileceksiniz. (ve muhtemelen sadece alıntıdır yazıp copy paste yapan bir forum hıyarını da yakında görürsünüz.)

Hazır mıyız? O halde haydi başlayalım!

Yöntem 1: @font-face

Tarihçe

@font-face, CSS 2 ile (evet, öyle yeni bir şey değil!) hayatımıza girmiş bir yapıdır. CSS Stil Sayfası üzerinden, sistemde adı belirtilen yazı tipi olmadığında, tarayıcının bunu internetten yükleyerek kullanmasını amaçlar.

Bunu duyunca şaşıracaksınız ancak, aslında font-face özelliğini ilk destekleyen tarayıcı Internet Explorer 4! Ancak her şey istenildiği gibi gitmemiş.

Yıllar Boyu Tarayıcı Kullanımı 1996-2009-tahmini-tarayici-kallanimi 1996-2009-tahmini-tarayici-kallanimi  

Internet Explorer font-face özelliğini desteklemeye başladığında, font-face özelliği ile web sitesi tarafından tanımlanabilecek yazı tipi formatı olarak EOT'u geliştirmiş. EOT, (yani Embedded OpenType) yıllar önce Microsoft tarafından geliştirilmiş ve web sitelerince kullanılmak için özelleştirilmiş bir font tipi. Herhangi normal bir TrueType ya da OpenType yazı tipi Microsoft'un sağladığı bir dönüştürücü aracılığıyla .eot formatına dönüştürülebiliyormuş. EOT formatı, bir yazı tipinin sadece belirli karakterlerini içerecek şekilde ufaltılabiliyor ve sıkıştırılabiliyormuş. Ayrıca sadece belirli bir domainde (alan adı) çalışmak üzere (başkalarının yazı tipini izinsiz kullanmasını engellemek için) kısıtlanabiliyormuş.

Ancak EOT popüler olamamış. Internet Explorer'ın o zamanki en büyük rakibi olan Netscape Navigator (4. sürümüyle beraber) başka bir yazı tipi formatı olan Trudoc'u desteklemeye başlamış. O zamanlar Netscape ciddi anlamda popülerdi. (1997'de tarayıcı pazarının %60'ından fazlasının Netspace hâkimiyeti altında olduğu tahmin ediliyor.) Bu yüzden EOT standart olamadı.

netscape-firefox netscape-firefox   {left}Ancak bir süre sonra Microsoft, Netscape'i gerek mail kaynaklarını yok ederek, gerek kendi promosyonunu yaparak pazardan dışarı sürüklemiş. Bu sırada Netscape'in kaynak kodlarını geliştiricilere açılır ve Mozilla Netscape'in kaynak kodunu geliştirmeye başlar.

Mozilla, Netscape Trudoc'un kaynak kodunu açmadığı için bu formatı desteklemeyi bırakır. Bu sıralarda, EOT dosya formatında çeşitli açıklar (örneğin belirli bir alan adının kullanımı için şifrelenmiş yazı tipinin kırılarak herkes tarafından kullanılabilir hale getirilebilmesi) olduğu keşfedilmiştir.

TTF (TrueType) ve OTF (OpenType) yazı tiplerini kullanma desteğini ilk Webkit yerleşim (layout) motorunu kullanan Safari sunmaya başlar (3.1 sürümü ile). Gerek açıklarından duyulan endişe, gerek EOT'u bir tarayıcıya uyarlamanın (implement) gereksizliği ve uyarlama işleminin zorluğu gibi nedenlerle başka hiçbir tarayıcı EOT desteği sağlamamıştır.

@font-face ile TrueType ve OpenType yazı tipi desteğini Safari'den sonra ikinci sunan tarayıcı Gecko yerleşim (layout) motorunu kullanan Mozilla Firefox'tur. Firefox 3.5 sürümünden itibaren TrueType ve OpenType yazı tiplerinin @font-face ile web sitesine gömülmesini desteklemektedir. Opera da 10. sürümünden itibaren TrueType ve OpenType yazı tiplerini desteklemeye başlar. Google Chrome 3. sürümünün betasında bu özelliği hala desteklememektedir. Internet Explorer ise 8. sürümünde halen sadece EOT'u destekler.

Görülebileceği üzere tüm tarayıcılar CSS'nin font-face özelliği ile sistemde hali hazırda yüklü olmayan bir yazı tipini internetten alarak gösterme kabiliyetine sahip değildir. Keza, sahip olan tarayıcılar da tek bir format üzerine anlaşabilmiş değillerdir.

@font-face ile gömülen OTF uzantılı bir yazı tipinin Firefox'ta görünümü. Firefox Firefox  

Aynı yazı tipi Google Chrome özelliği desteklenmediği için görüntülenemiyor. Google-Chrome Google-Chrome  

Microsoft, W3C'nin CSS3 tanımında yer alması için 2007 yılında bir başvuru yapmış, ancak başvuru kabul edilmemiştir. Bunun üzerine EOT formatında bazı değişiklikler ve iyileştirmeler yapılarak 2008 yılında tekrar başvurulmuştur. EOT'un CSS3 standartları içerisinde yer almasının avantajları ve dezavantajları halen tartışılmaktadır.

TTF ve OTF formatlarının internette kullanılmasının birçok dezavantajı vardır. Bunlardan en basiti, lisanslı olarak satılan bir yazı tipinin bir web sitesinde kullanılmak üzere sunucuya gönderilememesidir. Herhangi bir alan adı için şifreleme ve kullanım hakkı ayarlaması yapılamaması telif hakları dolayısıyla kullanımı kısıtlı yapar. Microsoft EOT formatıyla bunların üstesinden gelineceğini öne sürerken, karşı düşüncedekiler, bunların TTF ve OTF formatlarına yapılacak ufak eklentilerle de mümkün olabileceğini, webin yeni bir formata (ve haliyle yeni hatalara, sıkıntılara) ihtiyacını olmadığını, EOT formatının tarayıcılarda kullanılmak üzere uyarlanmasının (implement) zor olduğunu öne sürmektedirler.

Kullanım

Gelelim kullanıma... İlk iş olarak web sitemizde göstermek istediğimiz bir yazı tipi buluyoruz. EOT uzantılı yazı tiplerinin sadece Internet Explorer'da, TTF ve OTF uzantılı yazı tiplerinin ise sadece Safari, Firefox 3.5+ ve Opera 10+ tarayıcılarda etkili olacağını, Chrome ve diğer tarayıcılarda ise, belirlediğiniz font ailesindeki bir sonraki yazı tipinin geçerli olacağını unutmayın.

Kullanacağınız yazı tipini sunucunuza atıyorsunuz.

CSS2'nin @font-face özelliği ile stil belgenizde yazı tipine bir ad veriyor ve konumunu belirtiyorsunuz.

[css] @font-face { font-family: Dejavu; font-weight: normal; src: url('http://www.siteninadiniburayayaz.com/buraya/da/konumu/gir/dejavu.ttf'); } [/css]

Eğer dilerseniz, yazı tipinin koyu italik ve koyu italik hallerinin bağlantılarını da aynı yazı tipi adı kullanıp font-weight ve font-style özelliklerini değiştirerek belirtebilirsiniz. Örneğin;

[css] @font-face { font-family: Dejavu; font-weight: normal; src: url('http://www.siteninadiniburayayaz.com/buraya/da/konumu/gir/dejavu.ttf'); } @font-face { font-family: Dejavu; font-style: italic; src: url('http://www.siteninadiniburayayaz.com/buraya/da/konumu/gir/dejavu_italic.ttf'); } @font-face { font-family: Dejavu; font-weight: bold; src: url('http://www.siteninadiniburayayaz.com/buraya/da/konumu/gir/dejavu_bold.ttf'); } @font-face { font-family: Dejavu; font-weight: bold; font-style: italic; src: url('http://www.siteninadiniburayayaz.com/buraya/da/konumu/gir/dejavu_bold_italic.ttf'); } [/css]

ile bu yazı tipinin değişik stillerini de kullanabilirsiniz. Daha sonra, sitenizde bu yazı tipini herhangi bir font family özelliğinde belirtebilirsiniz. Mesela;

[css] .deneme { font-family: 'Dejavu', Georgia, serif; font-size: 32px; } [/css]

kod parçası ile, "deneme" classını alan herhangi bir DOM nesnesi destekleyen tarayıcılarda Dejavu yazıtipinde gözükecek, desteklemeyenlerde ise (Chrome, IE [ttf olduğu için] vs...) alternatif yazı tipi Georgia görünecektir.

(Destekleyen tarayıcılarda Dejavu yazıtipi sunucudan yüklenene kadar Georgia fontunda görünür, yazıtipi yüklenip kullanılmaya hazır hale geldiğinde tarayıcı yazı tiplerini değiştirir. Bu da yazı tipinin boyutuna göre birkaç saniye sürebileceğinden, okur bu değişimi genellikle fark eder. Bir test sürüşünü Firefox 3.5 ya da Safari ile şu adreste yapın isterseniz.)

Eğer bir yazı tipini stilini @font-face ile belirtmediğiniz bir özellikte kullanırsanız umulmadık bir sonuçla karşılaşabilirsiniz. (Örneğin gördüğüm kadarıyla Gecko kendisi yazıyı eğebiliyor ancak koyulaştıramıyor.)

Bu kadar @font-face @font-face dedikten sonra isterseniz şu sayfaya bir Firefox ile, bir de Chrome ya da IE ile göz atın. @font-face uygulamasının nasıl bir şey olduğunu, yüklenme sürelerini ve tarayıcı bağımlılığını en iyi bu şekilde anlayabilirsiniz.

Örnek Kullanım

[html] <!DOCTYPE HTML> <!-- Eksik değil, HTML 5 DOCTYPE tanımı bu kadarcık 😃 --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Haydi Yazı Tipi Test Edelim Dökümanı</title> <style type="text/css"> @font-face { font-family: Dejavu; src: url(Dejavu.ttf); } .deneme{ font-family: 'Dejavu', Georgia, serif; font-size: 52px; } </style> </head>   <body> <p class="deneme">Deneme 123</p> </body> </html> [/html]

Yöntem 2: sIFR (Scalable Inman Flash Replacement)

İşleyiş

sIFR Logo sIFR Logo

sIFR işletim sistemi ve tarayıcı bağımsız yazı tipi kullanımı sunmak üzere geliştirilmiş, Flash ve Java Scipt’ten oluşan açık kaynak kodlu ve ücretsiz bir programcıktır. Tahmin edeceğiniz gibi, bu eklentinin çalışması için bir tarayıcıda Java Scipt'in aktif ve Flash Player'in yüklü olması gerekmektedir. Bu özelliklerden bir tanesi bile sağlanmadığı zaman sIFR çalışmaya başlamaz, yazı tipleri CSS’de nasıl ayarlıysa öyle görünür.

sIFR en özet anlamıyla aşağıdaki işlemleri yapar:

  1. Normal bir web sayfası tarayıcıya yüklenir. Sayfa yüklendikten sonra sIFR'a ait Java Script çalışarak tarayıcıda Flash yüklü olup olmadığını kontrol eder. Eğer Flash Player yüklü değilse hiçbir değişiklik olmaz ve işlem burada sonlanır.
  2. Eğer Flash yüklüyse script, sizin belirttiğiniz yazı tipinin değiştirilmesini istediğiniz DOM elementlerini arar. Bu elementlerin her biri için, elementlerle aynı boyutta Flash sIFR kutuları oluşturur. Daha sonra elementin yazısını sIFR'a aktarıp, 6 pikselden başlatarak kutuya göre oranlayarak büyültür. sIFR objesini yazının üstüne atarak yazı tipi değişikliğini tamamlamış olur.

İşlemler bu kadar meşakkatli olmasına rağmen bunlar saniyeler içerisinde oluverir ve kullanıcı hiçbir şey sezmez.

Kullanım

Ne yazık ki, sIFR'ı kullanması o kadar basit bir şey değildir. Bir defa kullanacağınız yazı tipini ayarlamak için, size .fla (derlenmemiş flash dosyası) formatında gelen sIFR Flash projesini açmak ve kendi yazıtipinizi buraya ekleyerek derlemek zorundasınız. Bu da size Adobe Flash ya da .fla dosyası açıp, .swf olarak derleyebilecek Action Script konusunda endişeleri olmayan bir program yüklemenizi zorunlu kılıyor. (Gerçi araştırdığımca siz yazı tipini gönderdiğinizde şu site sizin için derliyormuş.)

.swf dosyanızı kendinize göre ayarladıktan sonra çeşitli CSS, JS ve SWF dosyalarını projenize ekliyorsunuz. Bu yazıda sIFR'ı kurmayı en ince ayrıntısına kadar anlatmayacağım. Çünkü hem kullanmanızı önermiyorum hem de daha önce Türkçe olarak anlatanlar var. (Google'da arayın.)

Sonuç: Uğ-raş-tı-rı-cı!

flir_generated flir_generated  

Yöntem 3: FLIR (Facelift Image Replacement)

FLIR diğerlerinden farklı olarak, işi tarayıcıya bırakmak yerine ipleri eline alıp, tüm işi sunucuya yıkan bir sistemdir. FLIR'de istenilen yazı, istenilen stilde, sunucu tarafında yaratılarak bir resim dosyasına çizilir. (Render edilir.) Yazının kullanıcıya resim dosyası olarak gitmesi sayesinde, kullanıcı 1800'lerden kalan bir sistem kullanıyor olsa bile yazı tipini görür.

Sistem şu şekilde işler:

Tarayıcıya standart bir XHTML sayfası gönderilir. Sayfanın yüklenmesi ile bir Java Scipt kodu çalışarak, sunucuya çeşitli özelliklerde yeni yazı üretmesine dair istek gönderir. (Hangi DOM elementlerinin yazı tipinin değişeceğini siz belirlersiniz. Büyük, koyuluk gibi özelliklerde CSS etkilidir.) Sunucu kendi bünyesinde yazıyı üretir ve resim dosyası olarak istemciye gönderir. FLIR JS'si, standart metinle bu yeni gelen yazı tipini değiştirir.

Özetle: Sistem sIFR'la aynı şekilde işler. Ancak yazı tipi çizimi Flash ile yapılacağına, sunucu tarafından yapılarak istemciye resim dosyası olarak gönderilir.

Ne yazık ki bu sistemin birkaç dezavantajı var. Özellikle fazla trafiği olan sitelerde, yazı tiplerinin çizimi yüksek işlemci maliyetine sebebiyet verebilir. Aynı zamanda bu yazıların hepsinin resim dosyası olarak gönderilmesi de gereksiz trafiğe neden olacaktır. Ayrıca sunucu taraflı bir işlem olduğundan ve FLIR PHP'de yazıldığından, sunucunuzda PHP kullanıyor olmanız gerekiyor.

Kullanımını anlatmıyorum, zira burada anlatılmış.

Sonuç: Tavsiye edilmez.

Yöntem 4: Cufon

Cufon Cufon Cufon  

Cufón (Cufon) da diğerleri gibi bir çeşit yazı tipi üretme aracıdır. Cufon, sadece Java Script’ten oluşur ve bu yüzden flash gerektirmeksizin herhangi bir tarayıcıda çalışabilir. Çizimler sayfa yüklendikten sonra istemcide, yani browserda yapılacağından sunucuya ek bir yük bindirmez. Yazı tipleri, Cufon'un dönüştürücüsü ile JSON formatında bilgi içeren bir java script dosyasına dönüştürülür. Bu esnada yazının kalın, italik gibi diğer tipleri de seçilebilir. Cufon ile oluşturulan JS dosyası alt kümelemeyi destekler. Böylece sadece kullanacağınız karakterleri seçerek dosya boyutunu küçültebilirsiniz. Aynı zamanda dönüştürdüğünüz bu yazıtipi dosyasını belirli bir alan adında kullanılmak üzere kilitleyebileceğinizden, lisans sorunu olmaksızın tüm yazı tiplerini kullanmanız mümkündür. Ayrıca JS dosyaları tarayıcı önbelleğine atılabileceği için FLIR'da olduğu gibi aşırı bir trafik sorunu yaratılmaz.

Teknik olarak işlem şudur: Cufon, Firefox, Safari gibi canvas elementini destekleyen tarayıcılarda bu elementi kullanarak, Internet Explorer gibi VML (Vector Markup Language) çizimini destekleyen tarayıcılarda ise bu dili kullanarak, yazı tipi JS'sinden faydalanarak, yazı tipine çok benzeyen bir vektörel grafik çizimi yapar. (Benziyor diyorum, çünkü JS dosyasına dönüştürülürken sıkıştırma yapıldığından ufak da olsa farklar olabilmektedir. Öte yandan fark edene aşk olsun!)

Kulağa ne kadar süper gelse de, ne yazık ki Cufon'un da eksileri vardır. Tüm çizim istemci tarafında ve her sayfa yüklenmesinde tekrar tekrar yapıldığı için, aşırı derecede Cufon kullanılması sayfa açılışını yavaşlatır. Özellikle Internet Explorer gibi (hele de IE6 gibi) JS çalıştırma hızı çok çok düşük olan tarayıcılarda bu ciddi bir sorun olabilmektedir.

Cufon ile yaratılan görüntüler seçilemez! Bu yüzden, sIFR'dan farklı olarak Cufon'da yaratılan bir yazıyı, diğer metinler gibi seçemezsiniz. Cufon tüm CSS özelliklerini desteklememektedir. Ayrıntılı bir listeye şu ve şu adresten ulaşılabilir. (Öte yandan desteklenmeyen özelliklerin %90'ını kullanmıyorsunuzdur muhtemelen.)

Kullanım

Önce yazı tipimizi Cufón'un anlayabileceği şekle çevirmemiz gerekiyor. Bunun için aşağıdaki adımları takip edin:

  1. Kullanacak bir yazı tipi bulun. (Türkçe karakterlerin de yazı tipinde olması sizin için iyi olur.)

  2. Yazı tipini C:WindowsFonts klasörü dışında bir yere koyun. (Fonts dosyasından seçim yapılamamaktadır.)

  3. Bu adrese gidin.

  4. Regular typeface kısmında dönüştürmek istediğiniz yazı tipini seçin. (TTF, OTF veya PFB uzantılı olması gerektiğini unutmayın.)

  5. Bold, Italic ve BoldItalic kısımlarında yazının diğer stilleri elinizde mevcutsa (ve kullanmak istiyorsanız) bu dosyaları seçebilirsiniz.

  6. Yazı tipini web sitesinde kullanma hakkınızın olduğunu beyan ettiğiniz kutuyu işaretleyin. Font_EULA Font_EULA  

  7. Türkçe Karakterlere Sahip Bir Yazı Tipi Kullandığınızda En Ufak Dosya Boyutu İçin Yapmanız Gereken İdeal Ayarlar Türkçe Karakterlere Sahip Bir Yazı Tipi Kullandığınızda En Ufak Dosya Boyutu İçin Yapmanız Gereken İdeal Ayarlar Türkçe Karakterlere Sahip Bir Yazı Tipi Kullandığınızda En Ufak Dosya Boyutu İçin Yapmanız Gereken İdeal Ayarlar  

    Bir alttaki bölümde, yazı tipinin hangi karakterlerini dönüştürmek istediğinizi seçmelisiniz. Unutmayın ki, ne kadar az karakter seçerseniz dosya boyutu o kadar azalacaktır. Bu yüzden size önerim

    • Uppercase (Büyük Harfler)
    • Lowercase (Küçük Harfler)
    • Numerals (Sayılar)
    • Punctuation (Noktalama İşaretleri)
    • WordPress punctuation (Hangi harflerdir görmek için tıklayın)
    • Basic Latin (Latin Alfabesi, aslında bunu seçmeniz halinde ilk ikisini seçmiş oluyorsunuz 😃 )
    • and also these single characters kısmına ise, alfabemizin karakterleri şŞıiĞğÜüÇçÖö yazmayı unutmayın.
  8. Security kısmında, yazı tipini hangi alan adında kullanmak istiyorsanız onu yazmalısınız. Böylece başka birisi dosyanızı yürütse bile, yazı tipini kullanamayacaktır. Örneğin *.site.com yazarsanız, site.com ve tüm alt alanlarında (naber.site.com, selam.site.com) çalışacaktır.

  9. Performance & File Size kısmında bir değişiklik yapmamıza gerek yok.

  10. Cufón kullanacağımızdan, Customiziation kısmında da değişiklik yapmıyoruz.

  11. En altta, Cufón'un kullanım koşullarını ve lisans anlaşmasını kabul ediyor, "Let's Do This!" ile dönüşümü yaparak, Java Script dosyamızı kaydediyoruz.

Bu kadar! Artık yazı tipimizi kullanabiliriz.

Siteye Monte

Şimdi yazı tipini web sitemizde kullanalım. Bunun için aşağıdaki adımları izlemelisiniz:

  1. Şuradan Cufón'u indirin. (Sağ tıklayıp farklı kaydet ile indirebilirsiniz.)

  2. Sitemizin kaynak kodlarını açalım. HTML belgemizin HEAD kısmına, tüm dışsal CSS stil belgelerinin çağrımlarının hemen altına Cufón ve yazı tipi JS'sini belgemize ekleyelim. Cufón ve yazı tipi şuna benzer bir kodla belgeye eklenir:

    [html] <script src="cufon-yui.js" type="text/javascript" /> <script src="cufon-yazi-tipiniz.js" type="text/javascript" /> [/html]

    Dikkat etmeniz gereken iki önemli nokta, dosya konumlarını doğru belirtmiş olmanız ve stil belgeleri ile Cufón dosyalarını doğru sırada çağırmış olmanızdır.

    Doğru sıra:

    1. Stil Belgeleri
    2. Cufón
    3. Cufón yazı tipi (tipleri)Bu sıraya bir örnek verecek olursak:

    Yanlış [html] <script src="cufon-yazi-tipiniz.js" type="text/javascript" /> <script src="cufon-yui.js" type="text/javascript" /> [/html]

    [html] <script src="cufon-yui.js" type="text/javascript" /> <script src="cufon-yazi-tipiniz.js" type="text/javascript" /> [/html]

    Doğru [html] <!-- Önce stil belgeleri --> <script src="cufon-yui.js" type="text/javascript" /> <!-- Sonra Cufon --> <script src="cufon-yazi-tipiniz.js" type="text/javascript" /> <!-- En son yazı tipi 😃 --> [/html]

Yazı tipimizi ve Cufón'u ekledikten sonra, geriye kalan tek şey neleri bu yazı tipi ile görüntülemek istediğimizi seçmek. Bunun için de az biraz HTML bilginiz olması gerekiyor. Ben örnek olarak UBenzer'deki başlıkları Cufón'layacağım.

UBenzer'i açtım, kaynağı görüntüle ile HTML kaynağını görüntüledim. Yazıların başlığına giderek, bunun hangi HTML elemanı ile belirtildiğini buldum.

H1 H1  

[html] <h1><a title="Ege Bebek" rel="bookmark" href="http://www.ubenzer.com/ege-bebek/">Ege Bebek</a></h1> [/html]

Gördüğünüz gibi, benim sitem için yazı başlıkları h1 tagları arasında. Siz de kendi sitenizde hangi elemanlar için Cufón kullanacağınızı benzer şekilde tespit etmelisiniz.

Hangi web elementlerini Cufón'layacağınıza karar verdikten sonra ufak bir Java Script ile bunu belirtiyoruz:

[html] <script type="text/javascript"> Cufon.replace('h1'); Cufon.replace('h2'); Cufon.replace('#deneme'); Cufon.replace('.sinif'); </script> [/html]

Eğer h2 elementine, "deneme" id'sine ve "sinif" sınıfına (class) sahip bir elemanlar için de yazı tipi değişimini etkinleştirmek isteseydiniz, kod şöyle olacaktı:

[html] <script type="text/javascript"> Cufon.replace('h1'); Cufon.replace('h2'); Cufon.replace('#deneme'); Cufon.replace('.sinif'); </script> [/html]

Seçebileceğiniz web elementi konusunda bir sınır yok. Ama b.knu çıkarırsanız render işlemi çok uzun sürecek ve ziyaretçiniz bundan rahatsızlık duyacaktır. Cufon.replace herhangi bir geçerli CSS Selector'unu kabul eder. Tam bir liste için buradaki kaynaktan yararlanabilirsiniz.

Tüm kodları derlediğimizde, Cufón için aşağıdakine benzer bir yapınız olması gerekir:

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Cufon Denemesi</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="cufon-yui.js" type="text/javascript"></script> <script src="cufon-yazi-tipiniz.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1'); </script> </head> <body> <h1>Cufon ile yazılmış bir metin. :)</h1> </body> </html> [/html]

Yukarıdaki kodda iki noktaya dikkat çekmek istiyorum:

Birincisi DOCTYPE olarak strict tercih edilmesi tesadüf değil. Cufón Transitional DOCTYPE'larda line-height gibi bazı CSS özelliklerinde problem çıkarabiliyor. Eğer görünüm ile ilgili problem yaşarsanız DOCTYPE kontrolü yapmanızı ve şu belgeyi incelemenizi öneririn.

İkincisi, karakter kodlaması olarak UTF-8 seçilmesi bir tesadüf değil. Cufón'un doğru çalışması için UTF-8 kullanmalısınız.

Normalinde Cufón kurulumu bu kadar olmasına rağmen, Internet Explorer dandik olduğu için, </body> tagından hemen önce, bir kod parçası daha eklememiz gerekiyor. Aksi halde Cufón IE'de çok geç gösterilebiliyor.

[html] <script type="text/javascript"> Cufon.now(); </script> [/html]

Eğer Google Analytics gibi JS dosyaları da sayfanın sonunda çağrılıyorsa, onlardan önce yazabilirsiniz. Kodumuzun son hali şöyle oluyor:

[html] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Cufon Denemesi</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="cufon-yui.js" type="text/javascript"></script> <script src="cufon-yazi-tipiniz.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1'); </script> </head> <body> <h1>Cufon ile yazılmış bir metin. :)</h1> <!--- Sitenin diğer tüm içeriği de bu kısımda 😃 --> <script type="text/javascript"> Cufon.now(); </script> <!-- Google Analytics --> </body> </html> [/html]

Cufon birden fazla yazı tipini desteklemektedir. Ayrıntılı bilgi burada bulunabilir.

Wordpres'te Kurulum İçin Kolaylaştırıcı Bilgiler

Tema dosyalarınız /wp-content/themes/ içerisinde yer alır. Kullanıldığınız temanın muhtemelen header.php ve footer.php dosyaları vardır ve değişiklik yapmanız gereken kısımlar bu dosyalardadır.

Ayrıca... Şurada bir Wordpress eklentisi gördüm. Yukarıdaki kod değişikliklerinin hepsini sizin yerine yapıyor, size de sadece hangi kısımlarda Cufon kullanacağınızı belirttiğiniz Cufon.replace(); kısmını eklentiye girmeniz gerekiyormuş. Böylece tema dosyalarını değiştirmeniz gerekmiyormuş. Denemedim, denersiniz...

Şu an UBenzer'in yazı başlıklarında ve sair yerlerinde Cufon'u kullanımda görebilirsiniz. Ben kullanıyorum memnunum.

Cufon ve En Yakın Rakibi Typeface'in Karşılaştırması Cufon ve En Yakın Rakibi Typeface'in Karşılaştırması Cufon ve En Yakın Rakibi Typeface'in Karşılaştırması  

Yöntem 5: Typeface

Typeface, yapısal bakımdan Cufon ile neredeyse aynı özellikleri gösteren benzer bir yazı tipi gösterim yöntemidir. Typeface de Cufon gibi sadece JS'ye ihtiyaç duyar. Yazı tipi dosyaları kendi biçimine dönüştürülür ve benzer bir şekilde DOM'a uygulanır.

Aslına bakarsanız Typeface ile Cufon'u birbiriyle karşılaştırıp birini öne çıkarmak oldukça zordur. Belki ilk Cufon değil de Typeface'den haberdar olsam onu kullanıyor olabilirdim. Gelelim aralarındaki ufak farklara...

Typeface daha eski ve köklü iken, Cufon çok daha yeni ve _"taze kan"_dır. Typeface, çok daha fazla CSS özelliğini desteklerken, Cufon daha küçük boyutlara sahiptir. Typeface sadece TTF (True Type) yazıtipinin dönüşümünü desteklerken, Cufon Open Type tipini de destekler. İkisinde de alan adına göre kısıtlama, alt kümeleme mevcuttur. Yapılan testlere göre Cufon'un daha hızlı olduğu iddia edilse de gözle görülür bir fark bulunmamaktadır. Ne yazık ki ikisinde de metinler seçilemez.

Typeface'de yazı tipinin istenilen elemanlara uygulanması daha farklı şekildedir. Typeface'de, CSS ile dilediğiniz font-ailesini seçersiniz. Daha sonra bunu "typefacelemek" için, ilgili elemente typeface-js sınıfını eklersiniz.

Örnek HTML kodu: [html] <html> <head> <!-- önce dışsal cssleri yükleyin --> <link rel="stylesheet" type="text/css" ref="/style.css"> <!-- sonra typeface.js ve ardından typeface fontlarını ekleyin --> <script type="text/javascript" src="typeface-0.10.js"></script> <script type="text/javascript" src="helvetiker_regular.typeface.js"></script> </head> <body> <!-- örnek kullanım --> <div class="typeface-js" style="font-family: Helvetiker">Ahanda Typeface ile yazıldı.</div> </body> </html> [/html]

Web sitenizin yapısına göre, Cufon yerine bunu uygulamak bazılarınıza daha kolay gelebilir. Cufon'da Cufon.replace(), kullanılırken, Typeface'de elementlere typeface-js sınıfını atar ve font-family ile Typeface JS'sini eklediğiniz font-ailesini seçersiniz.

Hangisini kullanacağınız konusunda tercih tamamen sizindir. Bana kalırsa birbirinden bir farkı yok. 😃

typeface-examples typeface-examples  

Tüm Yöntemler ve SEO Sorunu

Metinlerin seçilebilir olmaması, vektör ve resim dosyayı şeklinde olmaları arama motorlarında problem yaratacakmış gibi görünebilir. Öte yandan, burada anlatılan yöntemlerin beşinde de ilk başta standart bir HTML sayfası alınmakta, sayfanın yüklenmesinin bitiminin hemen ardından istenilen yazı tipi uygulanmaktadır. Bu yüzden arama motorları tüm metinleri rahatlıkla indeksleyebilecek ve Java Script, Flash çalıştırma kapasitesi olmayan tarayıcılar bile tüm metinleri rahatlıkla gösterebilecektir. Sizin istediğiniz yazı tipinde olmasa bile.

Bu yüzden arama motoru konusunda kara kara düşünmenize gerek yok. Dikkat etmeniz gereken yazı tipi gömmeyi öğrendim diye, sitenizin her satırını farklı yazı tipi kullanarak maymuna çevirmemek, çok fazla dönüşüm kullanarak bant genişliğinizi harcamamak, tarayıcıları ve sunucunuzu yormamak, ziyaretçiyi sayfa önünde dakikalarca bekletmemek.

Hepsi bu kadar. 😃

Yararlanılan Kaynaklar

@font-face

sIFR

FLIR

Cufon

Typeface