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

Katie Hempenius
Katie Hempenius
X

Bu kod laboratuvarı, Font Face Gözlemci'yi kullanarak metnin nasıl hemen görüntüleneceğini gösterir.

Yazı Tipi Yüzü Gözlemcisi Ekle

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

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

Yazı Tipi Yüzü Gözlemcisini 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 ardından aşağıdaki komut dosyasını ekleyin. Bu, "Pacifico" ve "Roboto" yazı tipi aileleri 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özlemleyicilerini oluşturmanız gerektiğinden emin değilseniz CSS'nizdeki font-family bildirimlerine bakın. Bu beyanların font-family adını FontFaceObserver() öğesine iletin. Yedek yazı tipleri için bir yazı tipi gözlemleyicisi oluşturmaya gerek yoktur.

Örneğin, CSS'niz:

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

FontFaceObserver('Times New Roman') ekliyorsunuz. Times ve serif yedek yazı tipleri olduğundan bunlar için FontFaceObservers belirtmeniz gerekmez.

Yazı tipi yüklemesini algıla

Yazı tipi yüklemesini algılamak için kullanılan kod şuna benzer:

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

robotoObserver.load(), yazı tipi yüklendiğinde yerine getirilecek bir vaattir.

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

  • Bu sözü, az önce beyan ettiğiniz FontFaceObservers öğesinin hemen altına komut dosyanıza ekleyin:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Giriş

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ı 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ı belgenin kök öğesine (<html> etiketi) ekler.

✔️Giriş

Tamamlanmış komut dosyanız aşağıdaki gibi 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üncelle

Sayfanızın stili, başta bir sistem yazı tipi, fonts-loaded sınıfı uygulandıktan sonra ise özel yazı tipleri kullanacak şekilde belirlenmelidir.

  • 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öster'e, ardından Tam Ekran'a tam ekran basın.

Sayfa böyle görünüyorsa, Yazı Tipi Yüzü Gözlemcisini başarıyla uygulamış ve "Görünmez Metin Flash"ından kurtulmuşsunuz demektir.

El yazısı yazı tipinde bir başlık.