สอบถามการใช้คำสั่ง font-display

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

สอบถามการใช้คำสั่ง font-display

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

เว็บไซต์ใช้ font ที่อยู่ในเว็บเอง
  • สงสัยคำสั่ง font-display เราใส่ไว้ใน @font-face ที่เดียวเลยหรือเปล่าค่ะ

    โค้ด: เลือกทั้งหมด

    @font-face {
      font-family: 'Kanit';
      src: url('font/Kanit-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('font/Kanit-Bold.ttf')  format('truetype'),  
           url('font/Kanit-SemiBold.ttf')  format('truetype')  
    }
  • และส่วนค่าที่เหมาะกับการใช้ ควรเป็น swap ใช่ไหมค่ะ เพราะจะเรียก font พื้นฐานเครื่องก่อน ถ้าโหลดที่ใช้จริงถึงค่อยแสดง

    โค้ด: เลือกทั้งหมด

    font-display: swap;
ดูจากเว็บนี้มานะคะ : https://developer.mozilla.org/en-US/doc ... lay#syntax
https://css-tricks.com/almanac/properti ... t-display/
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถามการใช้คำสั่ง font-display

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

ใส่ font-display ไว้ที่ @font-face ที่เดียว ทำให้คะแนน SEO ขึ้นแล้วค่ะ

โค้ด: เลือกทั้งหมด

@font-face {
  font-family: 'Kanit';
  font-display: swap;
  src: url('font/Kanit-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('font/Kanit-Bold.ttf')  format('truetype'),  
       url('font/Kanit-SemiBold.ttf')  format('truetype')  
}
ก่อนปรับ
Selection_999(581).png
Selection_999(581).png (18.19 KiB) Viewed 668 times
หลังปรับ
Selection_999(582).png
Selection_999(582).png (8.46 KiB) Viewed 668 times
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 67