CSS @font-face

@font-face คือ CSS at-rule ที่บอกเบราว์เซอร์ว่าจะหาไฟล์ฟอนต์ได้ที่ไหนและจะเรียกมันว่าอะไร ได้รับการรองรับครั้งแรกใน IE 4 ในปี 1997 แต่กลายเป็นประโยชน์จริงในเบราว์เซอร์ต่างๆ ราวปี 2010 เมื่อ WOFF มาถึงและเบราว์เซอร์อื่นๆ นำ rule นี้ไปใช้อย่างสม่ำเสมอ

สำหรับ icon fonts @font-face คือกาวที่เชื่อมไฟล์ฟอนต์กับ CSS classes ที่แสดงไอคอน หากไม่มีมัน เบราว์เซอร์จะไม่มีทางรู้ว่า font-family: 'MyIcons' ควรโหลดไฟล์เฉพาะจากเซิร์ฟเวอร์ของคุณ

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Descriptor font-family ตั้งชื่อที่คุณจะอ้างถึงภายหลัง Descriptor src บอกเบราว์เซอร์ว่าจะดาวน์โหลดไฟล์จากที่ไหนและรูปแบบใด Descriptors font-weight และ font-style ช่วยให้มั่นใจว่าเบราว์เซอร์จะไม่พยายามสังเคราะห์รูปแบบ bold หรือ italic และ font-display ควบคุมสิ่งที่เกิดขึ้นขณะที่ฟอนต์กำลังโหลด

คำใบ้ format() หลัง URL แต่ละรายการบอกเบราว์เซอร์ว่าไฟล์อยู่ในรูปแบบใด เพื่อให้สามารถข้ามรูปแบบที่ไม่รองรับโดยไม่ดาวน์โหลดก่อน ชุดรูปแบบที่แนะนำได้แคบลงอย่างมากเมื่อการรองรับเบราว์เซอร์ดีขึ้น

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

ด้วยการครอบคลุมเบราว์เซอร์ 97%+ WOFF2 อย่างเดียวเพียงพอสำหรับโปรเจกต์สมัยใหม่ส่วนใหญ่ นี่เป็นแนวทางที่ง่ายและมีประสิทธิภาพสูงสุด

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

การเพิ่ม WOFF เป็น fallback ครอบคลุม IE 11 ซึ่งไม่รองรับ WOFF2 เบราว์เซอร์สมัยใหม่จะดึงไฟล์ WOFF2 IE 11 จะเปลี่ยนไปใช้ WOFF

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

Full "bulletproof" stack รวม EOT สำหรับ IE 6-8, WOFF2 สำหรับเบราว์เซอร์สมัยใหม่, WOFF สำหรับ IE 9-11 และ TTF เป็น fallback สุดท้าย เบราว์เซอร์ลองแต่ละรายการ src ตามลำดับและใช้รูปแบบแรกที่เข้าใจ แนวทางนี้จำเป็นเฉพาะสำหรับโปรเจกต์ที่มีความต้องการ legacy สูงสุด

รูปแบบมาตรฐานสำหรับ icon fonts ใช้ base class ที่ตั้งค่า font-family และรูปแบบการแสดงผลที่ใช้ร่วมกัน จากนั้น icon classes แต่ละตัว ที่ใช้ pseudo-elements ::before พร้อม content ที่ตั้งเป็น Unicode code point ของไอคอนแต่ละตัว

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

base class รีเซ็ต font styling เพื่อป้องกันเบราว์เซอร์จากการใช้ bold, italic หรือการแปลงอื่นๆ ที่จะทำให้ไอคอนผิดรูป คุณสมบัติ -webkit-font-smoothing และ -moz-osx-font-smoothing เปิดใช้งาน antialiasing เพื่อการแสดงผลที่คมชัดกว่าบน macOS และ iOS

แต่ละ icon class ตั้ง pseudo-element ::before พร้อม Unicode code point ที่กำหนดให้ glyph นั้น สัญลักษณ์ backslash-E (\E001) คือวิธีที่ CSS อ้างถึงตัวอักษร Unicode ด้วย hex code point

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

ทั้ง <i> และ <span> ใช้งานได้ดีพอๆ กัน element นั้นเองว่างเปล่า — ไอคอนถูก render ทั้งหมดโดย pseudo-element ::before

Descriptor font-display ควบคุมสิ่งที่เบราว์เซอร์แสดงในขณะที่ไฟล์ฟอนต์ยังดาวน์โหลดอยู่ นี่เป็นสิ่งสำคัญสำหรับ icon fonts เพราะการตั้งค่าที่ผิดอาจทำให้ไอคอนมองไม่เห็นระหว่างโหลดหน้า

สำหรับ icon fonts swap เป็นตัวเลือกที่แนะนำ การกะพริบสั้นๆ ของเนื้อหาที่ยังไม่ถูกจัดรูปแบบ (ที่ code points ของไอคอนอาจปรากฏเป็นสี่เหลี่ยมหรือช่องว่าง) ดีกว่าไอคอนที่มองไม่เห็นมาก ด้วย block ผู้ใช้อาจเห็นช่องว่างที่ไอคอนควรอยู่นานถึง 3 วินาทีบนการเชื่อมต่อช้า — ซึ่งดูเหมือนหน้าที่ใช้งานไม่ได้

ไฟล์ฟอนต์ blocking การ render โดยค่าเริ่มต้น — เบราว์เซอร์จะไม่ paint ข้อความโดยใช้ฟอนต์กำหนดเองจนกว่าไฟล์จะดาวน์โหลดสำเร็จ ต่อไปนี้คือเทคนิคในการลดผลกระทบ:

• Preload ไฟล์ฟอนต์ — ใช้ <link rel="preload"> เพื่อเริ่มดาวน์โหลดฟอนต์โดยเร็วที่สุด ก่อนที่เบราว์เซอร์จะ parse CSS ที่อ้างถึงมัน
• Self-host ฟอนต์ของคุณ — การให้บริการไฟล์ฟอนต์จาก origin เดียวกับ HTML หลีกเลี่ยงการค้นหา DNS เพิ่มเติมและการตั้งค่าการเชื่อมต่อ และไม่มีปัญหา CORS
• Subset ฟอนต์ของคุณ — ลบไอคอนที่ไม่ได้ใช้เพื่อลดขนาดไฟล์ ฟอนต์ 500 ไอคอนที่คุณใช้แค่ 50 ตัวสิ้นเปลือง 90% ของการดาวน์โหลด
• ใช้ unicode-range — ถ้ามีชุดไอคอนหลายชุด descriptor นี้บอกให้เบราว์เซอร์ดาวน์โหลดไฟล์ฟอนต์เฉพาะเมื่อตัวอักษรในช่วงที่ระบุถูกใช้จริงในหน้า

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

Attribute crossorigin จำเป็นแม้สำหรับฟอนต์ same-origin — นี่คือข้อกำหนดเฉพาะของ font loading specification หากไม่มีมัน เบราว์เซอร์จะดาวน์โหลดฟอนต์สองครั้ง: ครั้งหนึ่งจาก preload hint (โดยไม่มี CORS) และอีกครั้งจาก rule @font-face (พร้อม CORS)

• ข้อผิดพลาด CORS — ไฟล์ฟอนต์ที่ให้บริการจาก origin อื่น (เช่น CDN subdomain) ต้องการ header Access-Control-Allow-Origin บนเซิร์ฟเวอร์ หรือใช้ attribute crossorigin บน tag <link> หากไม่มีการกำหนดค่า CORS ที่เหมาะสม เบราว์เซอร์จะบล็อกฟอนต์อย่างเงียบๆ
• ไอคอนแสดงเป็นสี่เหลี่ยมหรือสี่เหลี่ยมผืนผ้า — โดยทั่วไปหมายความว่า path ไฟล์ฟอนต์ผิด ฟอนต์ยังไม่โหลด หรือชื่อ font-family ใน icon class ไม่ตรงกับชื่อใน @font-face declaration ตรวจสอบแท็บ Network ของเบราว์เซอร์เพื่อยืนยันว่าไฟล์ฟอนต์โหลดด้วย status 200
• ไอคอนแสดง glyphs ผิด — Unicode code point ขัดแย้งกับ system fonts ถ้า icon font ใช้ code points ในช่วงที่ทับซ้อนกับ system fonts ทั่วไป เบราว์เซอร์อาจ render ตัวอักษรระบบแทน Icon fonts มักใช้ Private Use Area (U+E000 ถึง U+F8FF) เพื่อหลีกเลี่ยงนี้