Herşey ilk adımlarla başlar...

Thursday, September 02, 2010

Google Fonts API

9/02/2010 Posted by Nurettin Onur YAKIT , , , , , , , , , , , No comments

Bir süre önce , "Google Font API" 'yi duyurdu.. Google Font API sayesinde browserlardan bağımsız olarak istediğimiz bir font'u kullanabiliriz.
The Google Font API hides a lot of complexity behind the scenes.
API sayesinde IE6 dahil olmak üzere bütün güncel browserlarda aynı sonucu alabiliyoruz..
 Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up)
 Google'ın bu konuda yazdıklarını okumak isterseniz buradan bulabilirsiniz.

 Veya bu yazıya devam edip nasıl kullanabileceğinizi hemen öğrenebilirsiniz !

Nasıl Kullanılır 


Basit bir html sayfası oluşturalım :



<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
</head>
<body>

<h1> Make the Web Beautiful <h1>

</body>
</html>



Şimdi bu sayfamızdaki "Make the Web Beautiful"  header'ımızın font'unu değiştirelim. Tabi ki bunun için Google Font API'yi kullanacağiz.




Google Font Directory 'den istediğimiz bir font'u seçelim. Bu örnekte kullanmak için "Tangerine" font'unu seçtim.


 Açılan sayfadan "Get The Code" sekmesi ile kodumuzda kullanacağımız kodlara ulaşabiliriz..


 Yapmamız gereken tek şey burada bulunan "link" kodunu sayfamıza eklemek ve seçtiğimiz fontu istediğimiz element'e atamak!


Şöyle ki :




<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
<title>untitled</title>

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>


<style>
h1 { font-family: 'Tangerine', arial, serif; font-size:50px }

</style>

</head>
<body>

<h1> Make the Web Beautiful <h1>

</body>
</html>


Ve işte sonuç : 

Make the Web Beautiful

0 comments: