sIFR (Scalable Inman Flash Replacement) JavaScript ve Flash kombinasyonu kullanarak web sitenizde daha güzel yazı karakterleri kullanabilmenizi sağlar. Böylece web sayfalarında kullanabileceğiniz belli başlı fontlar sınırlamasından sıyrılarak istediğiniz fontu kullanma özgürlüğü kazanırsınız. Bu fontların ziyaretçi bilgisayarında yüklü olması da gerekmez.
Teknik olarak sIFR, web sitesinde kullanıldığı bölümlerdeki text objeleri yerine, flash objesi yerleştirerek istediğiniz fontu görüntülemenizi sağlar.
sIFR Ayarları ve Kurulum
sIFR 3 versiyonu ile önceki versiyonlara göre bazı değişikler uğradı. Burada sIFR3 (sifr3-r436) e göre kurulum ve ayarları anlatacağız.
İlk önce sIFR (sifr3-r436) versiyonunu buradan indiriyoruz.
Fontumuzu Değiştirelim
İndirdiğimiz zip dosyasını bir klasöre çıkarıyoruz ve flash klasörü içindeki sifr.fla dosyasını açıyoruz. (Bu işlem için Adobe Flash programına ihtiyacınız var.)
.fla dosyasını açtığımızda karşımıza boş bir flash sahnesi görüyoruz. Sahnede beyaz bölümde çift tıklayarak movie clipin içine giriyoruz.
Karşımıza “Make sure to use correct style to embed glyphs:Bold Italic Normal Bold & Italic” şeklinde bir yazı gelecek. Yazının üstüne tıklayıp özellikler bölümünden kullanmak istediğimiz fontu seçiyoruz.
Burada başka bir ayar değiştirmenize gerek yok. İstediğimiz tüm değişiklikleri javascript ve css kullanarak yapacağız.
Artık dosyamızı export edebiliriz. File > Export > Export Movie (Ctrl+Alt+Shift+S) ile dosyamızı export ediyoruz. Kaydederken seçtiğiniz fontun ismi ile kaydetmeniz iyi olabilir. Bir sayfada birden çok font kullanmak istediğinizde kolaylık sağlayacaktır. Ben dosyayı “dreamspeak.swf“ olarak kaydettim. Yine karşınıza çıkan diyalogda herhangi bir özellik değiştirmiyoruz, “OK” e tıklıyoruz.
Dosyaları Yükleyelim
Font için .swf mizi hazırladıktan sonra dosyalarımızı sunucuya atabiliriz. SIFR3 ile birlikte artık lokal olarak test yapamıyoruz, o yüzden dosyaları sunucuya atmamız lazım. Yükleyeceğimiz dosyalar;
- css\sifr.css
- js\sifr.js
- js\sifr-config.js
- dreamspeak.swf (kendi hazırladığımız .swf dosyası)
Bu örnekte bütün dosyaları sunucuda “sifr3″ adlı bir klasör altında topluyorum. Siz kullanım rahatlığınıza göre istediğiniz yere atabilirsiniz.
HTML Dosyamızı Hazırlayalım
Oluşturduğumuz HTML dosyasında <head> </head> arasına css linkimizi ekliyoruz.
<link rel="stylesheet" href="sifr.css" type="text/css" media="all">
Yine <head> </head> arasına javascript eklentilerimizi yazıyoruz.
<script src="sifr.js" type="text/javascript"></script> <script src="sifr-config.js" type="text/javascript"></script>
Not: javascriptleri yüklerken sıralama önemli. sifr.js dosyasını mutlaka sifr-config.js dosyasından önce çağırmalıyız.
<body> </body> arasına aşağıdaki gibi bir başlık yazalım. Bir sonraki adımdaki ayarları yaptıktan sonra <h1></h1> arasındaki textler otomatik olarak bizim fontumuzla değişecek.
<h1>Dreamspeak</h1>
Hazırladığımız HTML dosyasını kaydederek sunucuya yükleyelim.
Ayarlarımız Yapalım
sifr-config.js dosyasını açarak tanımlamalarımızı yapıyoruz. Dosyanın içindeki tüm bilgileri silebiliriz. İlk önce fontumuzu tanımlayalım.
var dreamspeak = {
src: 'dreamspeak.swf'
};
Fontumuzu aktif ediyoruz.
sIFR.activate(dreamspeak);
sIFR’ın değişiklik yapacağı bölümleri belirtiyoruz.
sIFR.replace(dreamspeak, {
selector: 'h1'
});
sIFR’a “h1″ tagleri arasındaki yazıları değiştirmesini söyledik. Bunu istediğiniz başka bir tag için de yapabilirsiniz. (örn: h2, p, b, i…)
Kod şu şekilde olmalı;
var dreamspeak = {
src: 'dreamspeak.swf'
};
sIFR.activate(dreamspeak);
sIFR.replace(dreamspeak, {
selector: 'h1'
});
Şimdi bir test edebiliriz. Bakalım sIFR çalışıyor mu?
CSS Ayarları
Artık css yardımıyla fontumuzun büyüklüğünü ayarlayabiliriz. sifr.css dosyasını açıyoruz. En altta aşağıdaki kodu yazan bölümü göreceksiniz. Değişiklikleri burada yapacağız bu bölümden yukarıdaki koda dokunmamanızı öneririm.
@media screen {
/* Example:
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
}
*/
}
“@media screen {” den sonra /* ile */ arasını siliyoruz. (/* ve */ dahil)
@media screen {
}
Bu bölümde stilimizi veriyoruz.
@media screen {
.sIFR-active h1{
visibility: hidden;
font-size: 48px;
line-height: 10px;
}
Burada dikkat etmemiz gereken “.sIFR-active” classını kullanmamız ve “visibility: hidden;” özelliğini mutlaka yazmamız. .sIFR-active adından da anlaşılacağı gibi sIFR aktif olduğunda geçerli olması, visibility: hidden; dememizin sebebi texti saklaması için.
Not: sIFR yeni versiyonunda yapısal değişikliklere uğradı. Buradaki css yapısı öncekilerden farklı. Önceden “print” ve “screen” olarak iki farklı css bulunuyordu. Bizim incelediğimiz daha yeni versiyonda bu css ler birleştirilerek tek bir css haline getirildi. Print ve screen özelliklerini @media screen ve @media print kullanarak belirliyoruz.
Css dosyasında yapabileceklerimiz font-size, line-height vb. Birkaç basit özellik. Renk, arka plan gibi özellikleri sifr-config.js dosyası içinden değiştiriliyor.
Buraya kadar olan ayarlarla sFIR’ı sorunsuz olarak sayfalarınızda kullanabilirsiniz. Daha gelişmiş ayarlar için yazıyı okumaya devam edebilirsiniz.
Config Doyası İçinden Diğer Ayarlar
Birden Fazla Font Kullanmak
Eğer bir sayfada birden fazla font kullanacaksak bunları tek bir activate komutu ile yapmamız gerekiyor. Örneğin; sayfada “arial” ve “tahoma” fontlarını kullandığımız var sayalım. İki fontu da ayrı ayrı tanımladıktan sonra ikisini birden aktif ediyoruz.
Örnek kod;
var arial = { src: ' arial.swf' };
var tahoma = { src: ' tahoma.swf' };
sIFR.activate(arial, tahoma);
sIFR.replace(arial, {
selector: 'h1'
});
sIFR.replace(tahoma, {
selector: 'h2'
});
Daha Fazla Stil
Daha gelişmiş stil ayarlarını sifr-config.js içinden yapıyoruz. Kod içine css için ,css: [] ekliyoruz. Böylece “[]” arasına css taglerimizi yerleştirebileceğiz. Burada “css: [" öncesi “,” koymayı unutmamalısınız. Yoksa sIFR çalışmayabilir.
sIFR.replace(dreamspeak, {
selector: 'h1'
,css: [
'.sIFR-root { color:#ff0000; font-weight:bold; letter-spacing: -3;}'
]
});
Saydam (Transparent) Arka Plan
Şüphesiz en çok ihtiyacınız olacak özelliği nasıl ekleyeceğimizi söylemeden de geçmeyelim. Arka planı nasıl transparan yapacağız? Normalde flash dosylalarını saydam yapmaktan farkı yok "wmode: ‘transparent’" kullanacağız. Sadece önüne “,” koymayı unutmayın.
sIFR.replace(dreamspeak, {
selector: 'h1'
,css: [
'.sIFR-root { color:#ff0000; font-weight:bold; letter-spacing: -3;}'
]
,wmode: ‘transparent’
});
Linkleri Düzenlemek
Düzenlediğimizi textlere link veriyorsak nasıl düzenliyoruz ona bakalım. Burada yine sonuncusu hariç tüm ".a" tanımlarıdan önce “,” koymayı unutmamalıyız.
sIFR.replace(dreamspeak, {
selector: 'h1'
,css: [
'.sIFR-root { color:#ff0000; font-weight:bold; letter-spacing: -3;}'
,'a { color: #D8FF00; }'
,'a:link { color: #D8FF00; }'
,'a:hover { color: #FFFFFF; }'
]
,wmode: 'transparent'
});
Son olarak sifr.js ve sifr-config.js dosyalarını birleştirerek tek bir .js dosyası tüm işlernizi halledebilirsiniz. Fakat bu önerilen bir yaklaşım değil. Çünkü yeni sIFR versiyonları çıktıkça sadece sifr.js dosyasını değiştirip sifr-cofig.js dosyanıza dokunmadan kolayca yeni versiyonu kullanmaya devam edebilirsiniz.
Henüz yorum yapılmamış