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 (2539)
5 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 (2539)
    5 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