css font-face özelliği, sistemde yüklü olmayan font ailelerini kullanabilmek içindir.
Font aillerini local dosyardan ekleyebiliriz. Farklı dosya türleri bulunmaktadır. BEDT, WOFF2, WOFF, TFF&OTF, SVG. Bir fontun tüm tarayıcılar tarafından desteklenmesi için bu dosya türlerinde dosyaları olmalıdır. WOFF, TFF&OTF dosya türlerini tüm taraycılar desteklemektedir.
Aldığı parametreler:
font-family : Yazı tipi ailesi
local : Yerel
src : Dosya adresi.
font-style : Yazı stili
font-weight : Yazının kalınlığı.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Html sayfasına font eklemek için bir klasör oluştururuz ve içerisine fontumuzu bu dosyaya ekleriz. Daha css font-face özelliği ile projemize ekleriz. Bu şekilde yapmak zorunluluk değil düzenli olması içindir. Yoksa herhangi dosya içine fontlarımızı koyarak ulaşabiliriz.
Aşağıdaki örneğimizde fonts diye klasör oluşturalım. Aşağıdaki resimde görüldüğü gibi…
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: "Amattera Million";
src: url("fonts/Amattera_Million.ttf"),
url("fonts/Amattera_Million.otf");
}
.one { font-family:'Courier New', Courier, monospace}
.two { font-family: "Amattera Million"; }
</style>
<body>
<div class="one">Tasarım ve Yazılım...</div>
<div class="two">Tasarım ve Yazılım...</div>
</body>Html Çıktısı:
Başka bir yazımızda görüşmek üzere…
