4 Ocak 2014 Cumartesi

Typeface.js Kütüphanesi
     
         Herkese Merhabalar.

     Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere typeface.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Kullanımı oldukça basit olan ve kompleks bir yapıda olmayan bu kütüphanenin yardımımıza koşması ile web sitenizde yazılarınıza istediğiniz fontu eklemek için artık flash kullanmanıza, resimler oluşturmanıza gerek kalmadı. Bu kütüphane sayesinde sitenize dilediğiniz fontu ve rengi kolay bir şekilde ekleyebilirsiniz. Cümlenin harfleri arasındaki boşluk, harflerin üst ve alttaki boşlukları da tercihinize uygun bir şekilde ayarlanabilmektedir. Kütüphaneyi bu siteden indirip projenize ekleyebilirsiniz. Web sitenize font eklemek için typeface.js kütüphanesini kullanacağınız zaman, bu kütüphanenin okuyabileceği fontları indirip eklemeniz gerekir. Bu 3 fontu bu siteden indirip projenize ekleyebilirsiniz. Bu fontların neler olduğuna hep beraber bir göz atalım.

Font Ailesi: Helvetiker

 1. Regular (Sıradan)                                     



 2. Bold (Kalın)
3. Italic (Eğik)


4. Bold_Italic (Kalın ve Eğik)

Font Ailesi: Optimer ve Gentilis 


   Bu diğer iki fontun tiplerine de bu siteden bakabilirsiniz.

   Bu fontların sayfamıza nasıl ekleneceğini aşağıdaki kod parçacığında gösterdim.

 <script src="/js/typeface/typeface-0.14.js" type="text/javascript"/>  
 <script src="/js/typeface/fonts/helvetiker_bold.typeface.js" type="text/javascript"/>  
 <script src="/js/typeface/fonts/optimer_bold.typeface.js" type="text/javascript"/>

   Aşağıda sizler için ASP.NET ortamında yapmış olduğum örneğe bir göz atalım. Öncelikle Solution Explorer'a gereken dosyalarımızı  aşağıdaki gibi  ekliyoruz.


   Aşağıdaki kodlarda typeface.js kütüphanesinin fontlarını kullanarak değişik font ailelerinden farklı renklerde örnekler gösterdim. Umarım anlaşılır ve faydalı bir örnek olmuştur. Örneğin, projede bulunan aşağıdaki kod parçasında, typeface.js kütüphanesinin içerdiği Elephant isimli font ailesi örneğini kullanarak yazımın bu fontta ve yeşil renkte olmasını sağladım.

  <div class="typeface-js" style="font-family:Elephant;color:green">   
         <center>Font family: Elephant!</center>   
       </div>

Proje Kodları:

 
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <title>Typeface JavaScript Kütüphanesi Örnek</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
      <link rel="stylesheet" type="text/css" href="style.css" />  
      <script type="text/javascript" src="js/typeface-0.10.js"></script>  
      <script type="text/javascript" src="js/optimer_regular.typeface.js"></script>  
      <script type="text/javascript" src="js/qlassik_medium_regular.typeface.js"></script>  
 </head>  
 <body>  
      <div id="page-wrap">  
           <div class="headline typeface-js">  
                Nil'in Typeface Denemesi :)  
           </div>  
           <p style="color:yellow">  
                TYPEFACE JAVASCRIPT KÜTÜHANESİ ÖRNEĞİ  
           </p>  
           <table style="border:dotted; border-color:aqua;height:220px;width:320px"><tr><td>  
           <div class="typeface-js" style="font-family: 'Angsana New';color:hotpink">  
                <center>Font family: Angsana New!</center>  
           </div>  
     <div class="typeface-js" style="font-family: 'Agency FB';">  
                <center>Font family: Agency FB!</center>  
           </div>  
      <div class="typeface-js" style="font-family: 'Aharoni';color:red">  
                <center>Font family: Aharoni!</center>  
           </div>  
      <div class="typeface-js" style="font-family: 'Cordia New';color:chocolate">  
                <center>Font family: Cordia New!</center>  
           </div>  
      <div class="typeface-js" style="font-family: 'Aparajita';color:aqua";>  
                <center>Font family: Aparajita!</center>  
           </div>  
       <div class="typeface-js" style="font-family:'Castellar';color:pink">  
                <center>Font family: Castellar!</center>  
           </div>  
       <div class="typeface-js" style="font-family: 'Bookman Old Style';color:orange">  
                <center>Font family: Bookman Old Style!</center>  
           </div>  
       <div class="typeface-js" style="font-family:Elephant;color:green">  
                <center>Font family: Elephant!</center>  
           </div></td></tr>  
           </table>  
      </div>  
 </body>  
 </html>
Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)