0
CSS3 font-display nedir?
font-display özelliği nasıl kullanılır?
CSS3 font-display özelliği ile özel yazı tiplerini nasıl yükleyip görütüleyebilirim?
0
Genel olarak yazı tipleri sistemde yüklü olan standart yazı tipleri ve sistemde olmayan özel yazı tipleri olarak ayırabiliriz. CSS3 @font-face ile sistemde yüklü olmayan yazı tiplerini kullanabiliyoruz.
CSS3 font-display özelliği
@font-face tanımı ile özel yazı tiplerini kullanırken kullandığımız özel yazı tiplerinin sisteme nasıl yükleneceğini, özel yazı tipleri yüklenirken nasıl görüntüleneceğini ayarlayabildiğimiz bir özelliktir.
font-display aldığı değer;
@font-face {
font-family: "UzmanimFontu_auto";
src: url("FontDosyasiYolu.uzantisi");
font-style: normal;
font-display: auto;
}
@font-face {
font-family: "UzmanimFontu_block";
src: url("FontDosyasiYolu.uzantisi");
font-style: normal;
font-display: block;
}
@font-face {
font-family: "UzmanimFontu_swap";
src: url("FontDosyasiYolu.uzantisi");
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "UzmanimFontu_fallback";
src: url("FontDosyasiYolu.uzantisi");
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: "UzmanimFontu_optional";
src: url("FontDosyasiYolu.uzantisi");
font-style: normal;
font-display: optional;
}
body {
font-family: "UzmanimFontu_swap";
}
Kod bloğunda font-display tüm özellikleri için @font-face tanımı yaptık. İstediğimiz bir alanda font-family ismi ile çağırıp istediğimiz birini kullanabiliriz.
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol