แบบอักษรที่โฮสต์เอง

แบบอักษรที่โฮสต์ด้วยตนเองคือไฟล์แบบอักษรที่ให้บริการจากเซิร์ฟเวอร์ของคุณเองแทนที่จะเป็นไฟล์ของผู้ให้บริการแบบอักษรบุคคลที่สาม (เช่น Google Fonts)

การแสดงแบบอักษรที่รวดเร็วนั้นสำคัญอย่างยิ่ง เพราะการแสดงแบบอักษรที่เร็วขึ้นไม่เพียงหมายความว่าผู้ใช้จะเห็นข้อความได้เร็วขึ้นเท่านั้น แต่ยังมีผลอย่างมากว่าแบบอักษรนั้นทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ด้วยหรือไม่ หากส่งแบบอักษรไม่ได้ก่อนที่จะต้องใช้ ก็จะมีการเปลี่ยนเลย์เอาต์เมื่อมีการสลับแบบอักษร ขนาดของการเปลี่ยนเลย์เอาต์นี้อาจแตกต่างกันไป โดยขึ้นอยู่กับว่าแบบอักษรสำรองตรงกับแบบอักษรของเว็บมากน้อยเพียงใด ในการดูการทำงานของปรากฏการณ์นี้ ให้ดูการสาธิตและเปรียบเทียบการเปลี่ยนแปลงของเลย์เอาต์ที่เกิดขึ้นในการเชื่อมต่อที่รวดเร็วกับการเชื่อมต่อที่ช้า

ตัวอย่างด้านล่างรวมเทคนิคด้านประสิทธิภาพ 2 แบบไว้ด้วยกันเพื่อแสดงแบบอักษรที่โฮสต์ด้วยตนเองให้เร็วที่สุดเท่าที่เป็นไปได้ ได้แก่ การใช้การประกาศแบบอักษรในบรรทัดและการใช้รูปแบบแบบอักษร WOFF2

  • การประกาศแบบอักษรในบรรทัด: การประกาศ @font-face และ font-family ในบรรทัดในเอกสารหลัก แทนที่จะรวมข้อมูลนี้ในสไตล์ชีตภายนอกจะช่วยให้เบราว์เซอร์ระบุได้ว่าจะใช้ไฟล์แบบอักษรใดในหน้าเว็บโดยไม่ต้องรอดาวน์โหลดไฟล์สไตล์ชีตแยกต่างหาก ซึ่งเป็นสิ่งสำคัญเนื่องจากโดยทั่วไปเบราว์เซอร์จะไม่ดาวน์โหลดไฟล์แบบอักษรจนกว่าจะทราบว่ามีการใช้งานไฟล์นั้นๆ ในหน้าเว็บ ในกรณีส่วนใหญ่ การประกาศแบบอักษรในบรรทัด แนะนำให้ใช้ preload เพื่อโหลดแบบอักษร

  • WOFF2: จากแบบอักษรสมัยใหม่ WOFF2 เป็นแบบอักษรใหม่ล่าสุดที่รองรับเบราว์เซอร์ได้กว้างที่สุด และบีบอัดได้ดีที่สุด เพราะใช้ Brotli ทำให้ WOFF2 บีบอัดได้มากกว่า WOFF 30%

หากต้องการปรับปรุงประสิทธิภาพเพิ่มเติม ให้พิจารณาใช้การตั้งค่าย่อยแบบอักษร การตั้งค่าย่อยแบบอักษรคือการแบ่งไฟล์แบบอักษรออกเป็นส่วนย่อยๆ ซึ่งโดยทั่วไปจะมีเป้าหมายเพื่อนำอักขระที่ไม่ได้ใช้ออก วิธีนี้จะช่วยลดขนาดไฟล์ของแบบอักษรได้อย่างมาก เครื่องมือสำหรับการสร้างชุดย่อยของแบบอักษร ได้แก่ fontkit, subfont และ glyphhanger

ดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติแนะนำสำหรับแบบอักษรที่โฮสต์ด้วยตนเองได้ที่การใช้แบบอักษรที่โฮสต์ด้วยตนเอง

ตัวอย่าง

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>