CSS3 font-display özelliği ile özel yazı tipleri nasıl yüklenir? font-display nasıl kullanılır?

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?

ergin ergin (2515)
1 yıl önce sordu

Toplam 1 Cevap


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;

  • auto: Özel yazı tipi yükleme durumuna tarayıcının karar verdiği durumdur.
  • block: Özel yazı tipi yüklenene kadar yazılar görünmez. Ekran boş gözükür.
  • swap: Özel yazı tipi yüklenene kadar sisteminin standart yazı tipi ile göstermesini sağlayan özelliktir.
  • fallback: Tarayıcı kısa bir süre bekleyip eğer özel yazı tipi yüklenmediyse standart yazı tipi ile gösterir. Yüklendikten sonrada özel yazı tipini gösterir.
  • optional: Tarayıcı kısa bir süre bekleyip eğer özel yazı tipinin yüklenmediyse sistemde yüklü yazı tipi ile içeriği gösterir. fallback’den farklı olarak geçiş süresi yoktur.
@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.

ergin ergin (2515)
1 yıl önce cevaplandı

üyelik gerektirir

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