หลีกเลี่ยงการแฟลชข้อความที่มองไม่เห็น

เคธี่ เฮมปีเนียส
Katie Hempenius
X

ห้องทดลองโค้ดนี้จะแสดงวิธีแสดงข้อความทันทีโดยใช้ Font Face Observer

เพิ่มตัวสังเกตของแบบอักษร

Font Face Observer คือสคริปต์ ที่จะตรวจจับการโหลดแบบอักษร ระบบบันทึกไฟล์ fontfaceobserver.js ลงในไดเรกทอรีโปรเจ็กต์แล้ว คุณจึงไม่จำเป็นต้องเพิ่มแยกต่างหาก อย่างไรก็ตาม คุณต้องเพิ่มแท็กสคริปต์สำหรับแท็กดังกล่าว

  • คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
  • เพิ่มแท็กสคริปต์สำหรับ fontfaceobserver.js ไปยัง index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

ใช้ Font Face Observer

สร้างการสังเกตการณ์

สร้างผู้สังเกตการณ์สำหรับแบบอักษรแต่ละชุดที่ใช้ในหน้าเว็บ

  • เพิ่มสคริปต์ต่อไปนี้ไว้หลังสคริปต์ fontfaceobserver.js วิธีนี้จะทำให้เกิดผู้สังเกตการณ์สำหรับชุดแบบอักษร "Pacifico" และ "Roboto" ดังนี้
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

หากไม่แน่ใจว่าต้องสร้างตัวสังเกตแบบอักษรใด เพียงมองหาการประกาศ font-family ใน CSS ส่งชื่อ font-family ของการประกาศเหล่านี้ไปยัง FontFaceObserver() คุณไม่จําเป็นต้องสร้างตัวสังเกตแบบอักษรสําหรับแบบอักษรสำรอง

ตัวอย่างเช่น หาก CSS มีลักษณะดังนี้

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

ให้คุณเพิ่ม FontFaceObserver('Times New Roman') Times และ Serif เป็นแบบอักษรสำรอง คุณจึงไม่จำเป็นต้องประกาศ FontFaceObserver สำหรับแบบอักษรดังกล่าว

ตรวจหาการโหลดแบบอักษร

โค้ดสำหรับตรวจหาการโหลดแบบอักษรจะมีลักษณะดังนี้

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

robotoObserver.load() คือสัญญาที่จะแก้ไขเมื่อแบบอักษรโหลด

เว็บไซต์เดโมใช้แบบอักษร 2 แบบ คุณจึงต้องใช้ Promise.all() เพื่อรอจนกว่าแบบอักษรทั้ง 2 แบบจะโหลดเสร็จ

  • เพิ่มสัญญานี้ลงในสคริปต์ด้านล่างเซิร์ฟเวอร์ FontFaceObserver ที่คุณเพิ่งประกาศไป
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️ เช็คอิน

สคริปต์ควรมีลักษณะดังนี้

<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 รายการ

  • แทนที่ความคิดเห็น /* Do things */ ในสคริปต์ด้วยบรรทัดนี้
document.documentElement.classList.add("fonts-loaded");

การดำเนินการนี้จะเพิ่มคลาส fonts-loaded ลงในองค์ประกอบรูทของเอกสาร (แท็ก <html>) เมื่อโหลดแบบอักษรทั้ง 2 แบบแล้ว

✔️ เช็คอิน

สคริปต์ที่เสร็จสมบูรณ์แล้วควรมีลักษณะดังนี้

<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

คุณควรจัดรูปแบบหน้าเว็บให้ใช้แบบอักษรของระบบในตอนแรกและแบบอักษรที่กำหนดเองเมื่อใช้คลาส fonts-loaded

  • อัปเดต CSS ดังนี้
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

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

ยืนยัน

  • หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ

หากหน้าเว็บเป็นแบบนี้ แสดงว่าคุณติดตั้ง Font Face Observer สำเร็จแล้ว และลบ "Flash ของข้อความที่มองไม่เห็น"

ส่วนหัวในรูปแบบตัวอักษรคัดลายมือ