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

Katie Hempenius
Katie Hempenius
X

ห้องทดลองโค้ดนี้แสดงวิธีแสดงข้อความทันทีโดยใช้ แบบอักษร ผู้สังเกตการณ์

เพิ่ม Font Face Observer

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

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

ใช้ Font Face Observer

สร้าง Observer

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

  • เพิ่มสคริปต์ต่อไปนี้หลังสคริปต์ fontfaceobserver.js การดำเนินการนี้จะสร้าง ผู้สังเกตการณ์ "แปซิฟิก" และ "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') เวลาและ Serif คือ แบบอักษรสำรอง คุณจึงไม่ต้องประกาศ FontFaceObserver สำหรับแบบอักษรนั้น

ตรวจหาจำนวนแบบอักษร

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

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

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

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

  • เพิ่มคำสัญญานี้ลงในสคริปต์ใต้ 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 สำเร็จแล้ว สังเกตและลบ "Flash of Invisible Text" อีกต่อไป

ส่วนหัวในรูปแบบตัวอักษรตัวเขียน