JAVASCRIPT KÜTÜPHANELERİNİN FONTLAR İÇİN KULLANIMI VE CUFON KÜTÜPHANESİ
JavaScript Kütüphanelerinin Fontlar İçin Kullanımı
Merhaba arkadaşlar bu hafta JavaScript kütüphanelerinin fontlar için kullanımını ve Cufon kütüphanesini göreceğiz. JavaScript font (yazı tipi) kütüphaneleri, oluşturduğumuz internet sayfalarının yazı tipleri için, geniş seçenekler sunmakta ve yazılar üzerinde toplu değişimlere izin vermektedirler. Bu işlemler için kullanılan temel JavaScript kütüphaneleri; Typeface.js ve bugün bahsedeceğimiz Cufon kütüphanesi gibidir. Her iki kütüphane de temelde aynı işleve sahip olup, internet sayfalarının yazı tiplerini değiştirmeyi sağlasa da Cufon kütüphanesi bu işlem için daha geniş seçenekler sunmaktadır.
Merhaba arkadaşlar bu hafta JavaScript kütüphanelerinin fontlar için kullanımını ve Cufon kütüphanesini göreceğiz. JavaScript font (yazı tipi) kütüphaneleri, oluşturduğumuz internet sayfalarının yazı tipleri için, geniş seçenekler sunmakta ve yazılar üzerinde toplu değişimlere izin vermektedirler. Bu işlemler için kullanılan temel JavaScript kütüphaneleri; Typeface.js ve bugün bahsedeceğimiz Cufon kütüphanesi gibidir. Her iki kütüphane de temelde aynı işleve sahip olup, internet sayfalarının yazı tiplerini değiştirmeyi sağlasa da Cufon kütüphanesi bu işlem için daha geniş seçenekler sunmaktadır.
Cufon Kütüphanesi
Kütüphane, internet sayfası içinde istenilen formatta yazı tipini kullanmamızı ve yazı tipi dönüşümlerini gerçekleştirmemizi sağlar. Tüm temel tarayıcılarda çalışır. Yazı tipi dönüştürme sırasında türkçe karakter desteği de eklenebilir. Oldukça fazla yazı üzerinde hızlı işlem yapar. Kütüphaneyi kullanabilmek için Cufon JS linkinden indirebilirsiniz. Kütüphaneyi bir ASP.NET sayfasında kullanabilmek için, ASP.NET projesinin dosyalarına eklememiz gerekiyor. Bununla birlikte kütüphaneyi kullanabilmek için, internet sayfamızda kullanmak istediğimiz yazı tiplerini seçmemiz ve bu yazı tiplerini birer JavaScript dosyası haline getirmemiz gerekiyor. Şimdi bu işlemi kolayca nasıl yapabileceğimizi göstereceğim: Öncelikle Cufon Yazı Tipleri linkinde bulunan yaklaşık 9300 yazı tipinden, internet sayfamızda kullanacağımız yazı tiplerini seçiyoruz. Şekildeki gibi seçtiğimiz yazı tipinin altında bulunan, "Cufon File Download" butonuna tıklıyoruz.
Butona bastığımızda gelen ekranda, internet sayfamızda kullanmak istediğimiz karakter kümelerini seçiyoruz (Türkçe karakterler, noktalama işaretleri gibi). Ardından "I accept all legal responsibility" yazan lisans onayını işaretliyoruz ve aşağıdaki şekilde gördüğümüz "Font Download as cufon" yazan butona tıklayarak, istediğimiz yazı tipinin bir JavaScript kütüphanesi halinde indirilmesi işlemini başlatıyoruz:
İndirdiğimiz yazı tipi JavaScript dosyasını da ASP.NET projemizin kaynak dosyalarına ekliyoruz. Ben yapacağımız örnek için "Arsenale White" ve "Quickie" yazı tiplerini seçtim ve aşağıdaki şekildeki gibi, onları birer JavaScript dosyası haline getirerek, Cufon kütüphanesiyle birlikte projemizin kaynak dosyalarına ekledim:
Sonrasında sayfanın <head> bölümüne aşağıdaki kod satırlarını ekleyerek, kütüphaneyi istediğimiz yazı tipleriyle beraber sayfada kullanılabilir hale getiriyoruz:
fontFamily: Bu özellik sayfamızda göstereceğimiz yazı için, yazı tipini seçmemizi sağlar. Özelliğe değer olarak, projemizin kaynak dosyalarına eklediğimiz yazı tiplerinden hangisini kullanmak istiyorsak, onun adını yazıyoruz. Kullanımı:
fontSize: Özellik yazının boyutunu istediğimiz ölçüde değiştirebilmemizi sağlıyor. Yazı boyutunu, piksel olarak ölçülendirilmiş haliyle alır. Kullanımı:
letterSpacing: Özellik yazı içindeki harfler arası boşlukları değiştirebilmemizi sağlıyor. Harfler arası boşluklar piksel olarak belirlenir. Kullanımı:
fontWeight: Özellik yazıdaki karakterlerin kalınlığını değiştirebilmemizi sağlar. Özelliğe değer olarak 100 ile 900 arası kalınlık değeri girebileceğimiz gibi, 'normal' ve 'bold' (kalın) gibi kalınlık değerleri yazılabilir. Kullanımı:
fontStyle: Özellik yazı karakterlerinin stilini belirlememizi sağlar. Değer olarak 'normal', 'italic' (italik) ve 'oblique' (eğik) değerlerinden birini alabilir. Kullanımı:
Sonrasında sayfanın <head> bölümüne aşağıdaki kod satırlarını ekleyerek, kütüphaneyi istediğimiz yazı tipleriyle beraber sayfada kullanılabilir hale getiriyoruz:
<script type="text/javascript" src="Scripts/cufon-yui.js"> </script>
<script src="Scripts/arsenale-white.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/quickie.cufonfonts.js"> </script>
Kütüphanenin yazı tipi ve yazı tipi özellikleri değişim fonksiyonu olarak, "replace()" fonksiyonu kullanılır ve bu fonksiyonun içine eklenecek seçeneklerle, istenilen özellikler eklenir. Fonksiyon parametre olarak, yazı tipi özellikleri değiştirilecek HTML etiketinin adını ('h1' gibi) veya ilgili etiketin 'class' ya da 'id' özelliğini ve yazı tipi seçeneklerini (option) alır. Söylediğimiz 2. parametre, isteğe bağlı olarak eklenmeyebilir. Fonksiyonun kullanımı:
Cufon.replace('h1', { yazı tipi seçenekleri}); Cufon.replace('h1'); //2. parametre olmadanÖrneğimize başlamadan önce replace() fonksiyonunun içine yazabileceğimiz bazı yazı tipi seçeneklerini tanıyalım:
- color: Bu özellikle, ilgili HTML etiketi içindeki yazıların rengini değiştirebiliriz. Değer olarak HTML renk kodlarını alır. Bu renk kodlarını HTML renk kodları linkinden öğrenebilirsiniz. Kullanımı:
Cufon.replace('h1', { color: '#0404B4;});
Cufon.replace('h1', { fontFamily: 'Arsenale White'}); //Arsenale White yazı tipi
Fonksiyonun içinde eğer bu özellik belirtilmemişse, yazı tipi varsayılan olarak, sayfanın <head> bölümüne son eklediğimiz yazı tipi kütüphanesinin adını, değer olarak alır.
Cufon.replace('h1', { fontSize: '25px;'}); //25 piksel
Cufon.replace('h1', { letterSpacing:'5px;' });
Cufon.replace('h1', {fontWeight: 'bold'});
Cufon.replace('h1', {fontStyle: 'italic'});
Kütüphanenin kullanımı ile ilgili temel özellikleri öğrendik. Şimdi öğrendiklerimizden faydalanarak bir Cufon örneği yapalım: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/cufon-yui.js"> </script>
<script src="Scripts/arsenale-white.cufonfonts.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/quickie.cufonfonts.js"> </script>
<script type="text/javascript">
Cufon.replace('h2');
Cufon.replace('#id-1', {
fontFamily: 'Arsenale White',
fontSize: '35px;',
});
Cufon.replace('p', {
color: '#DF0101;',
fontSize: '25px;',
});
Cufon.replace('h1', {
fontFamily: 'Arsenale White',
letterSpacing: '5px'
});
Cufon.replace('#id-2', {
fontSize : '30px;'
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Sayfaya son ekledigimiz yazi tipi quickie,
<br />
<br />
varsayilan yazi tipi olarak geldi.
</h2>
<h3 id ="id-1">Yazi tipi 'Arsenal White' ve boyutu 35 piksel oldu. </h3>
<p>Yazi tipi boyutunu ve rengini belirledik.</p>
<h1>karakterler arasi boslukları arttirdik. </h3>
<h4 id="id-2"> Yazi tipini 'id' ozelligiyle degistirdik. </h4>
</div>
</form>
</body>
</html>
Örneğimizde, kullanmak istediğimiz yazı tiplerini seçtik ve sayfamızda istediğimiz özelliklerle beraber bu yazı tiplerini ekledik. Örneğimizin çıktısını görelim:
Kütüphanenin kullanımı ve genel özellikleri bu şekildedir. Anlaşılacağı üzere, kütüphanenin kullanımı oldukça pratik ve yazı tipi seçimi, düzenlemesi konusunda bize geniş seçenekler sunacak boyuttadır. Kütüphanenin kullanım alanında dezavantaj olarak görülebilecek tek husus, yazıların istenilen tipe dönüştürüldükten sonra sayfa üzerinden artık seçilemiyor olmaları ve resim gibi gözükmeleridir. Ama eğer internet sayfanızdaki yazılara, seçmek kopyalamak gibi işlemler gerekmiyorsa, kütüphaneyi kullanarak daha özelleşmiş yazılar oluşturabilirsiniz umarım artık.
Kaynaklar:
Hiç yorum yok:
Yorum Gönder