Merhaba Arkadaşlar, Bu yazımda sizlere font-face kullanımı nı anlatıcağım.Öncelikle Kısaca font-face`in ne olduğundan bahsedeyim font-face sistemde yüklü olmayan özel fontları kullanmamızı sağlar.
Font-Face Kullanımı
Öncelikle Font-face tarayıcılar farklı formatlarda desteklediği için fontları dönüştürmemiz gerekicektir.Örneğin Explorer .eot Opera .svg gibi formatları destekliyor.Aşağıdaki sitelerde fontları dönüştürebilirsiniz;
Fontsquirrel: .tff olan yazı tipini .eot, .svg, ttf, woff formatlarına çevirebileceğimiz araç.
Font-Converter: .tff olan formatı .svg formatına dönüştrümek için kullanabileceğimiz araç.
@font-face Kod Yapısı
|
1 2 3 4 5 6 7 8 |
@font-face { font-family: "Oswald"; src: url(http://siteadi.com/font/oswald.ttf); } span { font-family: "Oswald", Arial , serif; } |
Burada @font-face kod bloğunda src ile fontu yüklüyoruz ve fontu belirtiyoruz.
|
1 2 3 4 5 6 7 8 9 |
@font-face{ font-family:"Oswald"; src: url('font/oswald.eot'); src: url('font/oswald.eot?#iefix') format('embedded-opentype'), url('font/oswald.svg#Gobold Bold') format('svg'), url('font/oswald.woff') format('woff'), url('font/oswald.ttf') format('truetype'); font-weight: normal; } |
Yukarıdada tarayıcı desteği için fontu eot,svg,woff ve tff gibi formatlarında yüklüyoruz.Kullanımını ise aşağıdaki şekilde yapabilirsiniz.
|
1 2 3 4 |
p{ font-family:"Oswald",sans-serif; font-size:35px; } |
Bu yazımında sonuna geldik, İyi günler 🙂
Yorumlar