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

Katie Hempenius
Katie Hempenius
X

Bu kod laboratuvarı, Yazı Tipi Yüzü kullanarak metni nasıl hemen görüntüleyeceğinizi gösterir Gözlemci.

Yazı Tipi Yüzü Gözlemci Ekle

Font Face Observer bir komut dosyasıdır algılamasını sağlar. İlgili içeriği oluşturmak için kullanılan fontfaceobserver.js dosyası proje dizinine zaten kaydedildiğinden dosyayı eklemeniz gerekmez ayrı olarak düzenleyebilirsiniz. Ancak bunun için bir komut dosyası etiketi eklemeniz gerekir.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  • index.html öğesine fontfaceobserver.js için 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 da "Pacifico" gözlemcileri ve "Roboto" yazı tipi aileleri:
  <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'nizdeki font-family beyanlarını sağlamanız gerekir. Bu beyanların font-family adını şuraya geçirin: FontFaceObserver(). Gerekirse yazı tipi gözlemleyicisi oluşturmaya yedek yazı tipleri sunar.

Örneğin, CSS'niz:

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

FontFaceObserver('Times New Roman') eklerdiniz. Times ve serif: Bu nedenle, bunlar için FontFaceObservers belirtmeniz gerekmez.

Yazı tipi yüklemesini algıla

Yazı tipi yüklemesini algılama kodu 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üme ulaştırılacak bir taahhüttür.

Demo sitesi iki farklı yazı tipi kullandığından Promise.all() kullanmanız gerekir ve yüklenene kadar bekleyin.

  • Bu sözü komut dosyanıza, eklemek istediğiniz FontFaceObservers az önce açıklandı:
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ı uygula

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

Bu işlem, fonts-loaded sınıfını dokümanın kök öğesine ( <html> etiketi) yükleyin.

✔️Check-in

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üncelle

Sayfanızın stili, başta bir sistem yazı tipi ve bir kez özel yazı tipleri kullanılacak şekilde biçimlendirilmelidir fonts-loaded sınıfı uygulandı.

  • 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.

Sayfa böyle görünüyorsa Font Face'ı başarıyla uygulamışsınızdır Gözlemci ve "Görünmez Metin'in Flash"ından kurtuldu.

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