CSS3 ile beraber gelen font-face özelliği sayesinde kolayca web-font’ları sayfamıza entegre edebiliyor ve kendimize özel web-font’ları kullanabiliyoruz.
İçerik
göster
CSS3 font-face ile web-font kullanımı
Basit olarak web font tanımı şu şekilde yapılmaktadır.
1 2 3 4 5 6 | @font-face{ font-family: "Font Adı"; src:url('pacifico-webfont.eot'), url('pacifico-webfont.ttf'), url('pacifico-webfont.woff'); } |
Elinizde bulunan True Tyte Font’unuzu web font’a dönüştürerek yukarıdaki eot, woff uzantılı doyaları elde edebilirsiniz .ttf uzantılı fontunuzu web-font’a dönüştürmek isterseniz Web Font Generator aracını kullanabilirsiniz.
Şimdi örnek olarak hazırladığımız koda geçelim
Örnek
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <style> @font-face{ font-family: "Murat ÖNER"; src:url('pacifico-webfont.eot'),url('pacifico-webfont.ttf'),url('pacifico-webfont.woff'); } *{ font-family: "Murat ÖNER", Calibri, Arial; } </style> </head> <body> <p><h2>Murat ÖNER</h2></p> <hr/> <div id="round">Bu web sayfası wet-font testi için hazırlanmıştır.</div><br> </body> </html> |
Sonuç
Örneğe ait kodları buradan indirebilirsiniz.
