CSS Dışardan Font Yükleme (font-face)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Dışardan Font Yükleme (font-face)

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(16918)
RAPOR ET
Bu dersimizde dışarıdan font çağırma yöntemi olan font-face ye değinecem.font-family i anlatırken standart fontlara değinmiştim.Bu dersimiz değişik fontları sitemizde kullanmayı görecez.
.ttf .oth .eot .svg uzantılı font uzantıları lazım gözünüz korkmasın tek bir siteden .ttf yi diğerlerine dönüştürecez.
.ttf ie hariç tüm tarayıcılar destekler.
.eot ie destekler.
diğer ikisini eski sürüm tarayıcılar için.

1-Şimdi .ttf uzantılı fontumuzu belirliyoruz.
2-Burata giriyoruz. http://www.fontsquirrel.com/tools/webfont-generator
3-add fonts tan fontu ekleyip yes diyip verilen dosyayı indirin.
4-Dosyaları çıkartıyoruz.yukarda yazdığım 4 uzantılı dosyayı ve stylesheet dosyası dışındakileri silin.
5-stylesheet.css i açın.
@font-face {
font-family: 'fontumuzun_ismi';
src: url('burnstow-webfont.eot');
src: url('burnstow-webfont.eot?#iefix') format('embedded-opentype'),
url('burnstow-webfont.woff') format('woff'),
url('burnstow-webfont.ttf') format('truetype'),
url('burnstow-webfont.svg#burnstown_damregular') format('svg');
font-weight: normal;
font-style: normal;

}


Yukardaki gibi bir kod verecektir.Font ismini değiştirebilir yada aynı bırakabilirsiniz.Yukardaki kodu sayfamızın üst kısımlarına yapıştırıyoruz ve diğer 4 dosyayı kullanacağımız css dosyasının yanına atıyoruz.Artık fontumuz hazır.

6-
font-family:font_ismi;

kullanabilirsiniz.

Genel Örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
@font-face {
font-family: 'burnstown_damregular';
src: url('burnstow-webfont.eot');
src: url('burnstow-webfont.eot?#iefix') format('embedded-opentype'),
url('burnstow-webfont.woff') format('woff'),
url('burnstow-webfont.ttf') format('truetype'),
url('burnstow-webfont.svg#burnstown_damregular') format('svg');
font-weight: normal;
font-style: normal;

}

.yazi{font-family:burnstown_damregular;font-size:300px;}
</style>
</head>
<body>

<div class="yazi">cArleone</div>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/rr9d6.png />
İndir : http://ustaderslik.com/dosya/font-face.rar



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol