Öne Çıkan Yayın

Uzak Masaüstü Bağlantısı ve Modem Port Ayarı

İyi günler bu konumuzda uzak masaüstü bağlantısı ve modem port ayarını anlatacağım. Normalde uzak masaüstü bağlantısı ayarını açtığımızda ye...

30 Eylül 2012 Pazar

Google Web Font

Web master olarak bir mutfakta çalışan ve veya kendi için çalışan arkadaşlarımızın yayına aldıkları sitelerde sade HTML tasarım olsada az biraz içerisinde css serpiştirilmiş olsada hep eksik bir yanlarının olduğu bilinmekte.

Bu eksiklik genellik ile tasarım için kullanılan görsellerden, yayındaki sitede kullanılan FONT lara kadar uzanmakta, burada bir kez daha hatırlamak için Google web font kullanılarak sitemizde ziyaretçimizin font klasöründe olmayan FONTLAR ile şık tasarıma bir adım daha yaklaşalım örneğini inceleyelim:

1. ADIM sitemizde aşağıdaki link üzerinden kullanmak istediğimiz FONT seçimi
http://www.google.com/webfonts bu link üzerinden yaklaşık 506 adet GOOGLE WEB FONT arşivine ulaşacaksınız.

2. ADIM sitemizde kullanmak istediğimiz font ilgisindeki css kodlarını ilgili font listesindeki Quick-use linki üzerinden ulaşmak.

3. ADIM inline ve veya dışarıdan @import çağırarak sitemizde bu GOOGLE web fontun kullanımı sağlamak.

Örnek Kullanım inline olarak seçilmiş Capriola fontu kullanımı içindir,
Sitelerinizin sayfalarında kullanmanız dileği ile
HTML-Kodu:
<!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>
 <title>Google WEB FONT Kullanımı ve Typography </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
 <link href='http://fonts.googleapis.com/css?family=Capriola' rel='stylesheet' type='text/css'>

</head>
<body>
  <span> http://www.bahadirakkoy.com.tr </span>
  <span  style="font-family: 'Capriola', sans-serif;"> http://www.bahadirakkoy.com.tr</span>
</body>
</html>


Ps: "Bu inline kullanımda yazı karakter boyutu ve rengi ile oynayabilirsiniz"

<== Örnek Çalışma ==>
http://www.bahadirakkoy.com.tr http://www.bahadirakkoy.com.tr

Hiç yorum yok:

Yorum Gönder