CSS’e başlamak

Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır.

CSS 1996′da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0′da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz.

CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:

Görünüm Avantajları

CSS HTML’e göre bir çok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.

1	<h1>CSS'e Giriş</h1>

HTML’de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

1 2 3 4 5 6 7 8 9

h1 { color: white; font: italic 11px Arial, serif; text-decoration: underline; background: yellow url(titlebg.gif) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px; }

Kullanım Kolaylığı

HTML’de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptımızı düşünütseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.

1	<h1><font color="blue">Başlık</font></h1>

Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS’de aynı işlem için

1	h1 {color: blue;}

hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.

1	h1, h2 {color: blue;}

Ayrıca tek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.

Tasarım Tutarlılığı

Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50′ye varan performans ve hız artışları olacaktır.

Gelecek Vaadediyor

HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML’in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor.

XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.

CSS Reset

meyerweb.com tarafından açık kaynak olarak sunulan Css Reset. Css ile uğraşıyorsanız browserlar’ın çeşitliliği yüzünden sıkıntı çekiyor olma ihtimaliniz çok yüksek. Bu reset kodlarını kullanarak sapmaları minimuma indirebilirsiniz.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSS3 ile daire çizmek

CSS3 ile resim kullanmadan daire çizmek mümkün.

CSS Kodumuz:

CSS3 ile resim kullanmadan daire çizmek mümkün. CSS Kodumuz: .daireclass { background-color: #c06; height: 150px; -moz-border-radius:75px; -webkit-border-radius: 75px; width: 150px; } HTML Kodumuz: <div class="daireclass"></div> Sonuç: Daha farklı şeylerde deneyebilirsiniz. Örnek (Kenarlıklı Daire) .daireclass { background-color: #c06; border: 3px solid #333; height: 150px; -moz-border-radius:75px; -webkit-border-radius: 75px; width: 150px; } Sonuç:

CSS ile Oval Köşeli Kutucuk Modeli Oluşturmak

Bu derste CSS kullanarak kenarları oval olan kutucukları nasıl yapabileceğimizi göstermek istiyorum.

Html kısmına alttaki kod parçacığını yazıyoruz.

<div class=”kutucuk”>

</div>

Css kısmına alttaki kod parçacığını yazıyoruz.

.kutucuk
{
background-color:#ffb519;
width:400px;
height:40px;
display:block;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
}

Evet arkadaşlar kenarları yuvarlak yapmış bulunmaktayız. Bu kod parçacığı İE, Chrome, Firefox, Safari, Opera ile sorunsuz çalışmaktadır. Kolay gelsin…  Sedat Demirdoğan

Clear Both Kullanımı

Clear:both özelliğini hakkında söyleyecek pek fazla birşey yok aslında.Yapmanız gereken tek şey aşağıda verdiğim örneği incelemeniz…

Css Kullanım Kodu:

<style type="text/css">
#genel_div{
width:153px;
border:solid 1px red;/*Kirmizi*/
}

#sol{
width:100px;
color:green;/*yesil*/
}

#sag{
width:50px;
color:blue;/*mavi*/
}

#sag,#sol{
float:left;
border:solid 1px orange;
}

#sil{
clear:both;
}

#dip{
color:gray
}
</style>

Html Kullanım Kodu:

<!—Html Kodu———————->

<div id=”sol”>Soldaki içeriğimiz.</div>

<div id=”sag”>Sağdaki içeriğimiz.</div>

<div id=”sil”></div>

<div id=””>dip</div>
<!—— https://yazilimsinifi.wordpress.com/2012/06/26/clear-both-kullanimi/ ——>

CSS 3′ün 5 temel yeteneği

CSS 3.0 yayınlandığından beri, bir yandan onunla neler yapılabildiğini hayretler içinde izliyorum, bir yandan da öğrenmeye çalışıyorum. Border-radius, box-shadow ve text-shadow özelliklerini zaten artık her projemde kullanıyorum. Ancak bunlardan başka, bütün tarayıcılar tarafından desteklenmediği için henüz kullanmaya alışmadığımız (veya tercih etmediğimiz) sıradışı yetenekleri var. Sıradışı diyorum çünkü bir gün sadece CSS ile nesnelere yansıma  verebileceğimiz aklıma bile gelmezdi.  Artık yavaş yavaş CSS 3′ün 5 yeni özelliğine alışıp, CSS deneyimimizi bir kaç adım daha öteye taşımak iyi olacaktır. Çünkü yakın gelecekte, bu temel özellikleri sık sık kullanmak durumunda kalacağımıza eminim.

1) Gradient

CSS 3.0′ın bize sunduğu en güzel nimetlerden biri olan Gradient özelliğinin Linear Gradient ve Radial Gradient olmak üzere 2 farklı kullanımı var. Ve bu özellikleri DIV, SPAN, P gibi bütün HTML elementlerinde kullanabiliyorsunuz. Bu özellik sayesinde, hiç resim dosyası kullanmadan gradientli butonlar ve arkaplan görüntüleri yapmak  artık mümkün oluyor. Böylece web sitelerinin yüklenme hızları da katbekat artıyor.

Şimdilik destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Linear Gradient

Firefox için kullanım şekli:

background-image:
-moz-linear-gradient(top, #F00, #F60)<img
title=”css-3-linear-gradient”
src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-linear-gradient.jpg&#8221;
alt=”” width=”200″ height=”150″ />

1 2 3

background-image: -moz-linear-gradient(top, #F00, #F60) <img class=”size-full wp-image-3522 alignnone” title=”css-3-linear-gradient” src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-linear-gradient.jpg&#8221; alt=”” width=”200″ height=”150″ />

Webkit tarayıcıları için kullanım şekli:

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))

1	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))

Radial Gradient

Firefox için kullanım şekli:

background-image: -moz-linear-gradient(top, #F00, #F60)

1	background-image: -moz-linear-gradient(top, #F00, #F60)

Webkit tarayıcıları için kullanım şekli:

background-image:
-webkit-gradient(linear,left bottom,left top,color-stop(0,
#F60),color-stop(1, #F00))<img
title=”css-3-radial-gradient”
src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-radial-gradient.jpg&#8221;
alt=”” width=”200″ height=”150″ />

1 2 3 4 5

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00)) <img class=”size-full wp-image-3525 alignnone” title=”css-3-radial-gradient” src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-radial-gradient.jpg” alt=”” width=”200″ height=”150″ />

2) Açılı Döndürme

CSS 3′ün transform özelliği ile birlikte gelen yeteneklerinden biri de, bütün html elementlerini verilen bir açı değerine göre döndürmesi.

Destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Kullanım Şekli:

-webkit-transform:
rotate(-10deg);
-moz-transform: rotate(-10deg);<img
title=”css-3-transform”
src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-transform.jpg&#8221;
alt=”” width=”234″ height=”197″ />

1 2 3 4

-webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); <img class=”alignnone size-full wp-image-3526″ title=”css-3-transform” src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-transform.jpg&#8221; alt=”” width=”234″ height=”197″ />

3) Yansıma

Favorilerimden biri kesinlikle bu özellik. Yazılara ve DIV’lere yansıma  özelliği vererek harikalar yaratabiliyorsunuz. Şimdilik sadece Chrome ve Safari tarafından destekleniyor. Umarım yakında Firefox tarafından da desteklenir.

Kullanım Şekli:

-webkit-box-reflect:
below -5px -webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(100, 100, 100, 0.4)));<a
href=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-reflection.jpg”><img
title=”css-3-reflection”
src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-reflection.jpg&#8221;
alt=”” width=”232″ height=”188″ /></a>

1 2 3

-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4))); <a href=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-reflection.jpg”><img class=”alignnone size-full wp-image-3527″ title=”css-3-reflection” src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-reflection.jpg&#8221; alt=”” width=”232″ height=”188″ /></a>

4) Yeniden Boyutlandırma

CSS 3′ün resize özelliği ile DIV’leri mouse ile tutup sürükleyerek yatay ve dikeyde boyutlandırabiliyoruz. Yani bir kutunun büyüklüğünü gerçek zamanlı olarak istediğimiz kadar değiştirebiliyoruz. Aşağıdaki örnekten ne demek istediğimi daha iyi anlayacaksınız. Bu özelliği de şimdilik sadece Chrome ve Safari destekliyor.

Kullanım Şekli:

overflow:
hidden;
resize: both;<img title=”css-3-resize”
src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-resize.jpg&#8221;
alt=”” width=”223″ height=”136″ />

1 2 3 4

overflow: hidden; resize: both; <img class=”alignnone size-full wp-image-3528″ title=”css-3-resize” src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-resize.jpg&#8221; alt=”” width=”223″ height=”136″ />

5) Kenar Çizgi Aralığı

CSS 3′ün outline-offset özelliği ile sahip olduğu bu yetenek de kutulara verdiğimiz çerçeve çizgisine aralık vermeye yarıyor. Yani kutunun kenar çizgisini belirlediğimiz bir değer kadar kenarlardan uzaklaştırabiliyoruz. Chrome veya Safari ile aşağıdaki örnekte ne demek istediğimi görebilirsiniz.

Kullanım Şekli:

outline:
solid 1px #f00;
outline-offset: 5px;<img
title=”css-3-outline-offset”
src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-outline-offset.jpg&#8221;
alt=”” width=”225″ height=”167″ />
<strong>
</strong>

1 2 3 4 5 6

outline: solid 1px #f00; outline-offset: 5px; <img class=”alignnone size-full wp-image-3530″ title=”css-3-outline-offset” src=”http://www.herhangibirsite.com/wp-content/uploads/2010/05/css-3-outline-offset.jpg&#8221; alt=”” width=”225″ height=”167″ /> <strong> </strong>

CSS Sözde Öğeler – Pseudo-Elements

CSS sözde öğeleri, bazı seçicilere özel efektler eklemek için kullanılır.

pseudo-elements Yazım Kuralı

Pseudo-Class yazım kuralını görelim.

seçici:pseudo-element {özellik:değer;}

Örnek olarak görelim.

p:first-line {color:orange;}

Class ile birlikte Pseudo-Elements kullanımını görelim.

seçici.class:pseudo-element {özellik:değer;}

Örnek olarak görelim.

p.ilk_satır_renkli:first-letter {
color:orange;
}

<p> Burası paragrafımız. </p>

:first-line Özelliği

Bir elemenanın ilk satırına stil vermek için kullanılır. Sonra ki satırlar normal olarak görüntülenir.

p:first-line {
color:orange;
}

( Kodun okunuşu: p elemanının ilk satırında ki metinlerin rengi turuncu olsun. )

:first-letter Özelliği

Bir elemenanın ilk satırında ki ilk harfe/karaktere stil vermek için kullanılır. Sonra ki harfler/karakterler normal olarak görüntülenir.

p:first-letter {
color:orange;
font-size:25px;
}

(Kodun okunuşu: p elemanının ilk satırında ki ilk harfin/karakterin rengi turuncu olsun ve font boyutu 25 piksel olsun.)

:after ve :before Özellikleri

Bir etiket içeriğinin önüne bir içerik eklenmek istendiğinde :before kullanılabilir. Bir etiket içeriğinin sonuna bir içerik eklenmek istendiğinde :after kullanılabilir.

CSS Kodumuz:

p:before {
{content:url(dosya.jpg);
}

h1:after {
{content:url(dosya.jpg);
}

HTML/XHTML Kodumuz:

<p> Bu bir paragraf </p>

<h1> Burası bir başlık</h1>

Bu kod çalıştırıldığında p etiketlerinin içerikleri başında dosya.jpg adlı gorseli gösterecektir ve h1 etiketlerinin içerikleri sonunda dosya.jpg adlı gorseli gösterecektir.

Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak

Birçok yuvarlak kenarlı kutu oluşturma tekniği mevcut. Daha önce yuvarlak kenarlı kutuların nasıl yapıldığını anlattım “Yuvarlak Kenarlı Kutular”, ayrıca CSS3 ile gelen border-radius özelliğinden bahsettiğimiz “Yuvarlak kenarlı kutular(border-radius) oluşturmak” makalemizde bahsettik. Şimdide daha farklı belki çok fazla kullanılmayan bir yuvarlak kenar çeşidini nasıl yapacağımızı anlatacağım. Aslında bu birazda göz yanılmasından yararlanarak oluşturulmuş bir yuvarlak kenardır, aslında sağdaki resimde gösterildiği gibi köşe yuvarlak değildir, ancak göze yuvarlakmış hissi vermektedir.

Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.

Yöntemi şöyle anlatabilirim;  bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.

Padding ve margin yardımı ile oluşturmak

HTML kodu

1 2 3

<div class="kutu1">     <p>{ CSS, XHTML ve Javascript }</p> </div>

CSS kodu

01 02 03 04 05 06 07 08 09 10

.kutu1{     background:#3274D0;     margin:0 1px;     padding:1px 0; }     .kutu1 p{         background:#3274D0;         margin:0 -1px;         padding:2px;     }

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı

1 2 3

<div class="kutu1">     <p>{ CSS, XHTML ve Javascript }</p> </div>

CSS kodumuz

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

.kutu1{     background:#848484;     border:1px solid #848484;     border-left-width:0;     border-right-width:0;     margin:0 1px; }     .kutu1 p{         background:#d3d3d3;         border:1px solid #848484;         border-top-width:0;         border-bottom-width:0;          margin:0 -1px;         padding:2px;     }

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz

1 2 3 4 5

<ul>     <li><a href=""><span>Bursaspor</span></a></li>     <li><a href=""><span>Trabzonspor</span></a></li>     <li><a href=""><span>Kayserispor</span></a></li> </ul>

CSS kodumuz

1 2 3 4 5 6

ul{margin:0; padding:0; width:250px} ul li{ list-style: none; margin-bottom:5px}     ul li a{display:block; background:#3274D0; margin:0 1px; padding:1px 0; position: relative; text-decoration:none;}         ul li a span{background:#3274D0; margin:0 -1px; padding:2px; display: block; color:#fff}     ul li a:hover{background:#fff;}         ul li a:hover span{background:#fff; color:#3274D0}

Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.

@Font-Face Kullanımı

Daha önce “Yeni nesil web tasarımcı olmak” başlıklı makalemde de bahsettiğim üzere, web sitelerimizde standart sistem fontlarından farklı fontlar kullanmak için artık sIFR gibi Flash tabanlı scriptler kullanmak zorunda değiliz. CSS 3′ün bize hediye ettiği en güzel özelliklerden biri olan @font-face ile bu işin üstesinden çok kolay bir şekilde gelebiliyoruz. Ancak o makalede @font-face özelliğinin üstünde çok durmamıştım. Verdiğim örnek satırlar @font-face’in genel kullanımını temsil ediyordu. O haliyle kullandığınız zaman bütün tarayıcılarda aynı sonucu alamazsınız.
Ben de blogumda font-face kullanmaya başladığımdan olsa gerek, konu ile ilgili ayrıntılı bir makale yazmak istedim. (Blogumdaki font-face özelliğini görmeniz için tarayıcınızın geçmişini silmeniz gerekebilir.) @font-face’in bütün tarayıcılarda aynı sonucu alacak şekilde nasıl kullanılacağından bahsetmek istiyorum. @font-face’i doğru kullandığınız takdirde aşağıdaki tarayıcılarda düzgün çalıştırabilir ve istediğiniz fontları web sitenizde sorunsuz kullanabilirsiniz:
Safari 3.1+
Opera 10+
Firefox 3.5+
Chrome 4.0+
Internet Explorer 6+
Bütün tarayıcılarda @font-face kullanımı
Font dosyalarınızın bir arada düzgün bir şekilde bulunmasını sağlamak için ilk yapacağınız şey, sunucunuzda “fonts” klasörü oluşturmak olsun. Fontlarınızı bu klasöre kopyaladıktan sonra aşağıdaki satırları CSS dosyanıza yerleştirin. Font seçerken, türkçe karakterleri destekliyor olduğuna dikkat etmelisiniz. Yoksa türkçe karakterleri sistem fontu olarak gösterir. Bunun da pek hoş bir görüntü oluşturduğunu söyleyemem. Gelelim @font-face satırlarına…
@font-face {

/* declare fonts */
font-family: “MuseoLight”;
src: url(“fonts/Museo300-Regular.;feot”);
src: local(“Museo 300”), local(“Museo-300”),
url(“fonts/Museo300-Regular.woff”) format(“woff”),
url(“fonts/Museo300-Regular.otf”) format(“opentype”),
url(“fonts/Museo300-Regular.svg#Museo-300”) format(“svg”);
}
Fontları çağırdığınız bağlantı yollarının doğru olduğundan emin olmalısınız. Bu satırlarda örnek olarak kullanılan MuseoLight font ailesini istediğiniz gibi değiştirebilirsiniz.
Daha sonra da bu fontu sitenin neresinde kullanacaksanız, CSS dosyasına bu özelliği aşağıdaki gibi tanımlamanız yeterli olur.

h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }
@font-face’in bütün tarayıcılarda düzgün çalışacak şekilde kullanımı bu kadar basit aslında.
Fark ettiğiniz üzere, bir fontu kullanabilmek için birden fazla font uzantısı kullanmamız gerekiyor. Bunun sebebi en çok kullanılan font uzantısı olan TTF’nin bütün tarayıcıların bütün versiyonları tarafından desteklenmiyor olması. Hatta Internet Explorer yine yapacağını yapıyor ve hiç bir versiyonunda TTF uzantısını desteklemiyor. Aşağıdaki tabloda hangi font uzantılarının hangi tarayıcılar ve versiyonlar tarafından desteklendiğini görebilirsiniz.

Font uzantılarını değiştirme
İsterseniz font uzantılarını birbirine çeviren ücretsiz programları indirip kullanabilirsiniz. Ama TTF uzantısını font-face’de kullanılan bütün uzantılara çevirebilen bir o kadar çok online araç varken, program indirmekle uğraşmanıza gerek yok. Bunların bana göre en iyisi fontsquirre, bu işin başarıyla üstünden geliyor.