Büyük bir merakla beklediğimiz CSS 3.0; web standartlarına bir yenisini ekleyerek daha da kullanışlı hale geldi. Örneğin yıllardır dikdörtgen kutuların kenarlarını yumuşatmak için binbir türlü zahmete girip, dört adet yuvarlak köşeyi grafik programımızda tasarlayıp HTML kodlarımız arasına gömmekle uğraşıyorduk.

Bu yeniliklerle beraber CSS’ de şu özellikleri yapmamız mümkün oluyor:

1. Yuvarlak Köşeler
2. Gölge (Shadow)
3. Font Arayüzü (Font Face)
4. Renk Geçişi (Gradient)
5. Obje Çevirme (Rotation)

Bunlar arasında benim tutmuş olduğum en güzel özellik gömülü font özelliği. Daha önce bu işlemi yapmış olduğum web sitelerde jQuery sIFR eklentisini kullanarak yapıyordum. Mantığı flash yapısında (swf uzantılı) fontu javascript ile site içine entegre etmek şeklindeydi. CSS 3.0’da ise @font-face stil tanımlaması içinde fontumuzu belirtip bu fontu dilediğimiz gibi kullanabilme şansımız var.

Tabii yine Internet Explorer’ı sevmeyen birisi olarak; yine yapmış yapacağını. Bu konuda sadece “Nedir bu IE’ den çektiğimiz!” diyorum…

Aşağıdaki tabloda @font-face’i hangi tarayıcının hangi formatta desteklediğini görmektesiniz. IE 4.0 ve sonraki versiyonları sadece .eot formatlı fontları okuyabiliyorken, Firefox; .ttf ve .otf formatlı fontları okuyabiliyor.

Bunun için ilk yapacağımız işlem ücretsiz bir font bulup bu fontun hem ttf yada otf ile eot formatlılarını bulmaktır. Eğer herhangi birini bulmuşsanız aşağıdaki adresten fontu dönüşüm yapabilirsiniz:
http://ttf2eot.sebastiankippe.com/

Şimdi ise hemen pratik uygulamaya geçip işlemin nasıl olduğunu göreceğiz. Elimizdeki fontun adının “Museo700.otf” olduğunu varsayalım (ttf’de olabilirdi). (Tabii bu durumda IE için olan fontumuz da “Museo700.eot”)

Aşağıdaki gibi bir HTML kodu oluşturuyoruz:

<html>
<head>
<style type="text/css">
@font-face {
	font-family: 'Museo700';
	src: url('Museo700.eot');
	src: local('Museo700 Regular'),
		 local('Museo700'),
		 url('Museo700.otf') format('opentype');
}

h2 {
    border-bottom: 1px solid #999;
    margin: 23px 0 11px 0;
    padding: 5px 0 6px 0;
    font-weight: normal;
    font-family: Museo700, Arial, serif;
    font-size:  24px;
}

</style>
</head>

<body>
<h2>Yaşasın! CSS 3.0'da artık istediğimiz font ile çalışabiliyoruz!</h2>
</body>
</html>

Ve sonuç… Artık özgürce istediğiniz fontu sitenizde kullanabilirsiniz. Örnek uygulamayı kaynak linkten örnek dosyayı indirmeniz mümkündür.

Başarılar dilerim.

The post Gömülü font özelliği first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.