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

Katie Hempenius
Katie Hempenius
X

Bu kod laboratuvarı, Font Face Observer'ı kullanarak metinleri nasıl hemen görüntüleyeceğinizi gösterir.

Yazı Tipi Yüzü Gözlemci Ekle

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 komut dosyası etiketi ekleyin:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Font Face Observer'ı kullan

Gözlemci Oluşturma

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

  • fontfaceobserver.js komut dosyasının arkasına aşağıdaki komut dosyasını 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 yüzü gözlemcilerini oluşturmanız gerektiğinden emin değilseniz CSS'nizde font-family bildirimlerini bulmanız yeterlidir. Bu beyanların font-family adını FontFaceObserver() adlı kullanıcıya iletin. Yedek yazı tipleri için yazı tipi gözlemleyicisi oluşturmaya gerek yoktur.

Ö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ı tipleridir. Bu nedenle, 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 */
});

✔️Check-in

Komut dosyanız artık ş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(){
  /* Do things */
});
</script>

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

  • Komut dosyasındaki /* 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ş

Tamamladığınız komut dosyası 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(){
    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 basın. Ardından, Tam ekran tam ekran düğmesine basın.

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

El yazısıyla yazılmış bir başlık.