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

Katie Hempenius
Katie Hempenius
X

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

เพิ่ม 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 ซึ่งจะสร้างตัวสังเกตสำหรับชุดแบบอักษร "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') Time และ 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 เรียบร้อยแล้วและกำจัด "ข้อความที่มองไม่เห็นซึ่งกะพริบ" ออกได้

หัวข้อแบบตัวเขียน