15 Ağustos 2013 Perşembe

Google CSS ile font kullanımı

Google 'ın ücretsiz olarak sunduğu Webmaster ların işini kolaylaştıran CSS ile font kullanımı sağlıyor.
Bilgi için http://www.google.com/fonts#AboutPlace:about linkini inceleyebilirsiniz.
622 font ailesini CSS ile basit kullanıma sunuyor.
Font listesine erişmek için http://www.google.com/fonts linkini kullanabilirsiniz.

Seçeceğiniz font/fontları Add to Collection butonu ile tanımlıyorsunuz. Ardından Font Seçim listesinin sağ kısmında Use adlı butona tıklıyorsunuz.
Size üç seçenek sunuyor
  • Standard : direk html sayfanıza eklemek için.
  • @import : css dosyanıza eklemek için
  • Javascript : javascript kullanımı için

Standart kullanımı için örnek:
Seçmiş oldugunuz linki <head> .... </head> etiketleri arasına yapıştırın:
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
Css dosyanıza:
.data-01{
    font-family: 'Grand Hotel'; ; 
}
html sayfanızın içinde kullanmak için:
<p class="data-01">Google font api- www.duruajans.com</p>
Demo için URL: http://www.duruajans.com/google_fonts/
Yer:İstanbul İzmir, Türkiye

12 Ağustos 2013 Pazartesi

Cufon

Cufon, web sayfalarında istediğimiz fontları kullanmamıza kolaylaştıran ve sayfalarınıza tasarım açısındak şık görünüm sağlayan bir teknik.
Cufon sayesende hoşumuza giden fontları ufak bir işlem ile web sayfalarınıza uygulayabilirsiniz.

Cufon Kullanımı

1) Cufon’un temelini oluşturan Javascript dosyasını (cufon-yui.js) http://cufon.shoqolate.com/js/cufon-yui.js adresinden indirebilirsiniz.

2) Kullanacağınız fontları kendiniz script haline döndürecekseniz http://cufon.shoqolate.com/generate/ adresinden aşağıda bulunan resimlerlerdeki ayarları kullanarak fontunuzun scriptini oluşturabilirsiniz
 




3) veya http://www.cufonfonts.com/tr adresinden font seçip, scriplerini indirebilirsiniz.

4) sayfanızda kullanmak için Örnek:

 <head></head> tagları arasına
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/örnek.font.js"></script>

<body> </body> tagları arasına
<script type="text/javascript">
Cufon.replace('#org4', {fontFamily : "örnek font ismi",fontSize: "24px",textShadow: '#FFF 1px 1px',color:'#069'});
</script>
<p>Örnek font ismi 24px:</p><span id="org4">Duruajans Cufon Kullanımı</span>
şeklinde kullanabilirsiniz.

5) Demo kullanımı için http://www.duruajans.com/cufont/  linkini ziyaret edebilirsiniz.
Kaydol: Kayıtlar (Atom)