Görünmeyen metnin yanıp sönmesini önleyin

Katie Hempenius
Katie Hempenius
X

Bu kod laboratuvarında, Font Face Observer'ı kullanarak metni nasıl hemen göstereceğiniz gösterilmektedir.

Yazı Tipi Kadran Gözlemcisi ekleme

Font Face Observer, bir yazı tipinin ne zaman yüklendiğini algılayan bir komut dosyasıdır. fontfaceobserver.js dosyası proje dizinine zaten kaydedilmiş olduğundan ayrı olarak eklemeniz gerekmez. Ancak bunun için bir komut dosyası etiketi eklemeniz gerekir.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  • fontfaceobserver.js için index.html'a bir komut dosyası etiketi ekleyin:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Font Face Observer'ı kullanma

Gözlemci Oluşturma

Sayfada kullanılan her yazı tipi ailesi için bir gözlemci oluşturun.

  • Aşağıdaki komut dosyasını fontfaceobserver.js komut dosyasının sonuna ekleyin. Bu işlem, "Pacifico" ve "Roboto" yazı ailesi için gözlemciler oluşturur:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

Hangi yazı tipi gözlemcilerini oluşturmanız gerektiğinden emin değilseniz CSS'nizde font-family bildirimlerini arayın. Bu beyanların font-family adını FontFaceObserver()'a iletin. Yedek yazı tipleri için yazı tipi gözlemci oluşturmanız gerekmez.

Örneğin, CSS'niz şu şekildeyse:

font-family: "Times New Roman", Times, serif;

FontFaceObserver('Times New Roman') değerini eklemeniz gerekir. Times ve serif yedek yazı tipleri olduğundan bunlar için FontFaceObservers tanımlamanız gerekmez.

Yazı tipi yüklenmesini algılama

Yazı tipi yükleme işlemini algılayan kod aşağıdaki gibi görünür:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load(), yazı tipi yüklendiğinde çözülen bir sözdür.

Demo sitesinde iki farklı yazı tipi kullanıldığı için her iki yazı tipi de yüklenene kadar Promise.all() simgesini kullanmanız gerekir.

  • Bu promise'i, komut dosyanıza yeni tanımladığınız FontFaceObservers'ın hemen altına ekleyin:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Giriş

Komut dosyanız aşağıdaki gibi görünecektir:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

fonts-loaded sınıfını uygula

  • Komut dosyasında /* Do things */ yorumunu şu satırla değiştirin:
document.documentElement.classList.add("fonts-loaded");

Bu işlem, her iki yazı tipi de yüklendikten sonra fonts-loaded sınıfını dokümanın kök öğesine (<html> etiketi) ekler.

✔️Giriş

Tamamlanmış komut dosyanız şu şekilde görünmelidir:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

CSS'yi güncelleme

Sayfanız, başlangıçta sistem yazı tipi, fonts-loaded sınıfı uygulandıktan sonra ise özel yazı tipleri kullanacak şekilde biçimlendirilmelidir.

  • CSS'yi güncelleyin:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Doğrula

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

Sayfa bu şekilde görünüyorsa Font Face Observer'ı başarıyla uygulamış ve "Görünmez Metin Yanıp Sönme" sorununu ortadan kaldırmışsınız demektir.

Eğik yazı tipi kullanılmış bir başlık.