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)
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ğı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>
Ekran Görüntüsü:
Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda buluşmak üzere şimdilik hoşçakalın...
Kaynaklar
1. http://css-tricks.com/typefacejs-a-sifr-alternative/
2. http://www.smashingmagazine.com/2007/08/08/80-beautiful-fonts-typefaces-for-professional-design/
3. http://typeface.neocracy.org/fonts.html
4. http://www.bravo-kernel.com/2010/10/introduction-to-typeface-js-based-headings/