CSS3: @Font-Face ile Özel Fontlar Nasıl Yapılır?

Web tasarımında bir devrin bitişi, bir devrin başlangıcı! Fon face tipografi açısından çok önemli. Çünkü Tipografi çok önemli...

Font Face özelliği ile CSS artık daha güçlü. Web tasarımcılar daha özgür olacak. Artık istediğimiz fontu kullanmak için saatlerce uğraştığımız anlar sona erdi diyebiliriz. Çünkü font face bir font dosyası (.ttf, .otf, .eot, svg, .woff) ile çalışıyor ve bu dosyanın istemci (kullanıcı-client) bilgisayarında yüklü olması gerekmiyor...

Eskiden bu işler şu şekillerde yapılırdı;

- SIFR (Scalable Inman Flash Replacement)
- Her harf için ayrı grafik (bkz: haber sitelerinde manşet başlıkları)
- PHP Image Replacement
- Fahrner Image Replacement (FIR)
- Diğer...


Font Face Kullanımı

Şablonu:

@font-face {
font-family: FontADI;
src: FontKaynakYolu;
font-weight: weight;
font-style: style;
}


Kullanımı:

@font-face {
font-family: Berlin;
src: (fontlar/berlin-bold.ttf);
font-weight:400%;
font-style:italic;
}


Yukarıda kodlar CSS içerisinde kullanılacak.
Ayrıca şu şekilde de kullanabiliriz:

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf');
}

dinozoom

web tasarımı

[CSS3: @Font-Face ile Özel Fontlar Nasıl Yapılır?]

CSS3: @Font-Face ile Özel Fontlar Nasıl Yapılır?

Web tasarımında bir devrin bitişi, bir devrin başlangıcı! Fon face tipografi açısından çok önemli. Çünkü Tipografi çok önemli...

Font Face özelliği ile CSS artık daha güçlü. Web tasarımcılar daha özgür olacak. Artık istediğimiz fontu kullanmak için saatlerce uğraştığımız anlar sona erdi diyebiliriz. Çünkü font face bir font dosyası (.ttf, .otf, .eot, svg, .woff) ile çalışıyor ve bu dosyanın istemci (kullanıcı-client) bilgisayarında yüklü olması gerekmiyor...

Eskiden bu işler şu şekillerde yapılırdı;

- SIFR (Scalable Inman Flash Replacement)
- Her harf için ayrı grafik (bkz: haber sitelerinde manşet başlıkları)
- PHP Image Replacement
- Fahrner Image Replacement (FIR)
- Diğer...


Font Face Kullanımı

Şablonu:

@font-face {
font-family: FontADI;
src: FontKaynakYolu;
font-weight: weight;
font-style: style;
}


Kullanımı:

@font-face {
font-family: Berlin;
src: (fontlar/berlin-bold.ttf);
font-weight:400%;
font-style:italic;
}


Yukarıda kodlar CSS içerisinde kullanılacak.
Ayrıca şu şekilde de kullanabiliriz:

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf');
}

dinozoom

web tasarımı