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

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?

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.