Çalışmalarımda cufon’u sürekli kullanıyorum. Elime yeni gelen psd dönüşümünde tasarımcı arkadaşın planladığı gibi gittiğimde 2 farklı font kullanarak cufon ile yazıları oluşturmam gerekti. İlk defa fazla font ile cufon kullanacağımdan bilgimde yoktu. Manuali açtım ve hemen sistemime entegre ettim. Başlayacak olan arkadaşlar için bu makalemi incelemelerini öneririm. Şimdi aşama aşama yapalım çalışmamazı. Önceki makaleyi okuduğunuza göre elinizde kullanacağınız fontların javascript dosyaları olmalı ve bunları aşağıdaki gibi sayfanızda çağırmalısınız.
cufon font dosyalarımızı sayfamıza çağıralım
<script src="media/fonts/dinBold.js" type="text/javascript"></script> <script src="media/fonts/dinNormal.js" type="text/javascript"></script>
Sayfamıza fontlarımızı çağırdık şimdisinde dosyalarımızın içlerine girerek onları çağıracağımız adları yazalım. .js dosyalarını açarak aşağıdaki gibi font-family alanını çağıracağımız isme göre düzenleyelim
font dosyalarımızı çağıracağımız adları belirleyelim
Cufon.registerFont({"w":192,"face":{"font-family":"DinBold"
Cufon.registerFont({"w":192,"face":{"font-family":"DinNormal"
sanırım kullanımını anladınız. font-family bölümüne yazdığımız isimleri birazdan çağıracağız.
fontlarımıza göre yazılarımıza cufon uygulayalım
Cufon.replace('h3', { fontFamily: 'Dinbold' });
Cufon.replace('h4', { fontFamily: 'DinNormal' });
herşey bu kadar. Ne kadar kolay değil mi? Aklıma gelmişken cufon kullanımında :hover (fare üzerine geldiğinde) kullanımınıda görelim.
cufon :hover (fare üzerine geldiğinde değişme)
Cufon.replace('h2', {
hover: {
color: '#ca081c'
}
});
cufon uygulanan elemente text-shadow (gölgelendirme) uygulayalım
Cufon.replace('#sidebar .navTitle', { fontFamily: 'DinNormal', textShadow: '#c0da7c 1px 1px' });
ve yaptığımız çalışma
yapılan şey çok basit faremiz cufon uygulanan element üzerine konumlandığında rengimiz #ca081c ile değiştiriliyor. başka bir makalede görüşmek üzere..
Çok işime yaradı sağolun.