Icon Fonts 101

Icon fonts คือฟอนต์ที่ใช้สัญลักษณ์รูปภาพแทนที่ตัวอักษรและตัวเลขปกติ แทนที่จะแสดงตัวอักษร "A" icon font จะแสดงไอคอนบ้าน ไอคอนแว่นขยาย หรือไอคอนรถเข็นสินค้า

เนื่องจากไอคอนอยู่ภายในไฟล์ฟอนต์ จึงทำงานเหมือนข้อความทุกประการ คุณสามารถปรับขนาดด้วย font-size เปลี่ยนสีด้วย color เพิ่ม text shadows ใช้ CSS transitions และแม้แต่สร้างแอนิเมชัน — ทั้งหมดนี้โดยไม่ต้องแตะไฟล์รูปภาพเลยแม้แต่ไฟล์เดียว

แนวทางนี้ให้ประโยชน์ทางปฏิบัติหลายประการ:

• ความละเอียดไม่จำกัด — เส้นโค้งเวกเตอร์แสดงผลได้คมชัดในทุกความหนาแน่นของหน้าจอ
• ขนาดไฟล์เล็ก — ไฟล์ฟอนต์ที่บีบอัดแล้วเพียงไฟล์เดียวแทนที่ไฟล์รูปภาพแต่ละชิ้นหลายสิบไฟล์
• ควบคุมด้วย CSS — สี ขนาด เงา ความโปร่งใส และสถานะ hover ทำได้ฟรีด้วยการจัดรูปแบบข้อความ
• คำขอ HTTP เดียว — ชุดไอคอนทั้งหมดโหลดในการส่งคำขอเครือข่ายเพียงครั้งเดียว

ในยุคต้นของเว็บ นักพัฒนาพึ่งพารูปภาพแต่ละชิ้นหรือ CSS image sprites — รูปภาพรวมขนาดใหญ่ที่แต่ละไอคอนอยู่ในพื้นที่สี่เหลี่ยมที่กำหนดไว้ Sprites ลดคำขอ HTTP แต่เปราะบาง: การเพิ่มหรือปรับขนาดไอคอนหมายถึงต้องสร้าง sprite sheet ใหม่ทั้งหมดและอัปเดตค่า offset เป็นพิกเซลด้วยมือ

ราวปี 2012 โปรเจกต์อย่าง Font Awesome และ IcoMoon ทำให้ทางเลือกที่สะอาดกว่าเป็นที่นิยม: บรรจุไอคอนเป็น font glyphs ที่แมปกับ Private Use Area ของ Unicode นักออกแบบสามารถเปลี่ยนชุดไอคอนทั้งหมดด้วยการเปลี่ยนการประกาศ @font-face เพียงครั้งเดียว และนักพัฒนาสามารถจัดรูปแบบไอคอนด้วย CSS เดียวกับที่ใช้กับข้อความ เทคนิคนี้แพร่หลายอย่างรวดเร็วและยังคงเป็นตัวเลือกที่เชื่อถือได้และมีค่าใช้จ่ายต่ำสำหรับระบบออกแบบที่ใช้ไอคอนสีเดียว

การถกเถียง "icon fonts กับ inline SVG" เป็นหัวข้อประจำในวงการ front-end มากกว่าทศวรรษ ทั้งสองแนวทางล้วนใช้ได้ — การเลือกที่ถูกต้องขึ้นอยู่กับความต้องการของโปรเจกต์คุณ

Icon Fonts

• คำขอ HTTP เดียว — ไฟล์ฟอนต์ไฟล์เดียวส่งมอบทุกไอคอน
• จัดรูปแบบด้วย CSS อย่างง่ายดาย — เปลี่ยน color, font-size และ text-shadow เหมือนข้อความทั่วไป
• สีเดียวเท่านั้น — แต่ละ glyph รองรับสีเติมได้เพียงสีเดียว
• ใช้งานง่าย — เพิ่มลิงก์ stylesheet ใช้ CSS class เสร็จ

Inline SVG

• หลายสี — แต่ละ path มีสีเติม stroke หรือ gradient ของตัวเองได้
• เข้าถึงได้โดยค่าเริ่มต้น — <title> และ aria-label ให้ความหมายที่แท้จริงแก่ screen readers
• แคชได้แต่ละชิ้น — ไอคอนที่ไม่ได้ใช้จะไม่ถูกดาวน์โหลด
• ควบคุมละเอียด — สร้างแอนิเมชัน path แต่ละชิ้น ใช้ filter ต่อแต่ละ element

SVG Sprites

• รวม SVG หลายชิ้นไว้ใน <symbol> sprite sheet เดียว
• อ้างอิงไอคอนด้วย <use href="#icon-name">
• ให้ประโยชน์ของทั้งสองแบบ — คำขอเดียว หลายสี เข้าถึงได้ — แต่ต้องการ build pipeline ที่ซับซ้อนกว่า

Icon fonts สามารถบรรจุในรูปแบบไฟล์ห้าแบบ แต่ละแบบมีการบีบอัด การรองรับของเบราว์เซอร์ และกรณีการใช้งานที่แตกต่างกัน ต่อไปนี้คือการเปรียบเทียบโดยรวม:

ไม่แน่ใจว่าควรเลือกรูปแบบใด? ใช้คู่มือการตัดสินใจเชิงปฏิบัตินี้:

• ถ้าเลือกได้แค่หนึ่ง — ใช้ WOFF2 มีการบีบอัดดีที่สุด (Brotli) และครอบคลุมเบราว์เซอร์ 97%+
• ถ้าต้องรองรับ IE 11 — ใช้ WOFF2 + WOFF WOFF รองรับเบราว์เซอร์ที่ยังขาด Brotli decoding
• ถ้าต้องรองรับ IE 8 — ใช้ WOFF2 + WOFF + EOT EOT เป็นรูปแบบเดียวที่ Internet Explorer 6-8 เข้าใจ
• สำหรับแอปเดสก์ท็อป — ใช้ TTF เป็นรูปแบบดั้งเดิมสำหรับการแสดงผลฟอนต์ระดับ OS บน Windows, macOS และ Linux
• สำหรับการดีบักปัญหาฟอนต์ — ตรวจสอบ SVG Font โครงสร้าง XML อ่านได้ด้วยมนุษย์ ทำให้ตรวจสอบ glyph paths และ metadata ได้ง่าย

เจาะลึกแต่ละรูปแบบเพื่อทำความเข้าใจส่วนภายใน ความเข้ากันได้ของเบราว์เซอร์ และแนวทางปฏิบัติที่ดีที่สุด:

เรียนรู้วิธีใช้รูปแบบเหล่านี้ในโปรเจกต์ของคุณ: