เครื่องมือนี้ทำอะไรได้
ตัวสร้าง CSS Font Stack สร้างค่า font-family ที่พร้อมวางใช้ จากฟอนต์ที่ติดตั้งอยู่แล้วในอุปกรณ์ของผู้เข้าชม เลือกสไตล์ เช่น ฟอนต์ System UI ของระบบ, neo-grotesque อย่าง Inter และ Helvetica, transitional serif อย่าง Charter หรือ monospace ที่เหมาะกับโค้ด แล้วเครื่องมือจะเรียงฟอนต์ที่ดีที่สุดของแต่ละแพลตฟอร์มตามลำดับที่ถูกต้อง
Stack เหล่านี้อ้างอิงชุด Modern Font Stacks ที่เป็นที่รู้จัก รวมถึง stack คลาสสิก -apple-system, BlinkMacSystemFont, "Segoe UI" ที่หลายเว็บยังใช้อยู่ คุณเพิ่มฟอนต์สำรองสำหรับข้อความภาษาจีนตัวย่อ จีนตัวเต็ม ญี่ปุ่น เกาหลี อาหรับ ไทย หรือฮินดี และฟอนต์อีโมจิสีไว้ท้ายสุดได้
วิธีใช้งาน
- เลือก Font stack พรีวิวด้านซ้ายจะแสดงหน้าตาบนอุปกรณ์ที่คุณใช้อยู่ตอนนี้ และคุณแก้ไขข้อความในพรีวิวเพื่อลองคำของคุณเองได้
- เลือก ฟอนต์สำหรับอักษรอื่น หากหน้าเว็บมีข้อความภาษาจีน ญี่ปุ่น เกาหลี อาหรับ ไทย หรือฮินดี
- เปิดหรือปิด เพิ่มฟอนต์อีโมจิ
- เลือก เอาต์พุต: declaration
font-familyธรรมดา, CSS custom property, รายการfontFamilyของ Tailwind หรือรายการธรรมดา - คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์
.css
ชื่อที่มีช่องว่างหรือขึ้นต้นด้วยตัวเลขจะถูกใส่เครื่องหมายคำพูดให้อัตโนมัติ ส่วนคีย์เวิร์ด CSS อย่าง system-ui และ sans-serif จะไม่ถูกใส่เครื่องหมายคำพูด เพราะหากใส่ จะกลายเป็นชื่อฟอนต์ที่ไม่มีอยู่จริง
ตัวอย่าง
System UI พร้อมฟอนต์สำรองภาษาจีนตัวย่อ:
font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";เคล็ดลับ
- ใช้ stack หนึ่งสำหรับข้อความเนื้อหา และ stack monospace สำหรับโค้ด: stack ระบบสองชุดไม่มีต้นทุนการโหลดเลย
- พรีวิวขึ้นกับฟอนต์ที่ติดตั้งในอุปกรณ์ของคุณเอง จึงควรตรวจหน้าเว็บบน Windows และบนมือถือด้วย
- หากภายหลังเพิ่มเว็บฟอนต์ ให้ใส่ไว้เป็นตัวแรกในรายการ และเก็บ stack ระบบไว้เป็นฟอนต์สำรอง
คำถามที่พบบ่อย
› Font stack คืออะไร?
คือรายการตระกูลฟอนต์ในพร็อพเพอร์ตี font-family ของ CSS เบราว์เซอร์จะใช้ฟอนต์แรกที่ติดตั้งอยู่ในอุปกรณ์ หากไม่มีก็ไล่ไปตัวถัดไป และจบด้วยตระกูลทั่วไปอย่าง sans-serif
› ทำไมต้องเพิ่มฟอนต์ภาษาจีน ญี่ปุ่น หรือเกาหลี?
ฟอนต์ตะวันตกอย่าง Inter หรือ Charter ไม่มีอักขระ CJK การใส่ PingFang SC, Microsoft YaHei หรือ Noto Sans SC ไว้ก่อนตระกูลทั่วไป ทำให้ข้อความภาษาจีนใช้ฟอนต์ที่เข้ากับสไตล์ แทนที่จะเป็นฟอนต์อะไรก็ได้ที่ระบบเลือก ภาษาอาหรับ ภาษาไทย และภาษาฮินดี (เทวนาครี) ก็เช่นกัน ส่วนภาษารัสเซีย ยูเครน กรีก เวียดนาม ตุรกี โปแลนด์ และภาษาอื่นที่ใช้อักษรละตินหรือซีริลลิกไม่ต้องเพิ่มอะไร เพราะฟอนต์ระบบและฟอนต์ Noto ในทุก stack รองรับอยู่แล้ว
› ทำไมฟอนต์อีโมจิอยู่หลัง sans-serif?
ฟอนต์อีโมจิครอบคลุมแค่อีโมจิ การวางไว้ท้ายสุดทำให้ตัวอักษรและตัวเลขทั่วไปไม่ถูกแสดงด้วยฟอนต์อีโมจิ ขณะที่อีโมจิยังได้อักขระสีบนทุกแพลตฟอร์ม
› Stack เหล่านี้ต้องดาวน์โหลดเว็บฟอนต์หรือไม่?
ไม่ต้อง ทุก stack ใช้ฟอนต์ที่มากับ Windows, macOS, iOS, Android หรือดิสทริบิวชัน Linux ทั่วไป หน้าเว็บจึงโหลดโดยไม่มีคำขอฟอนต์เลย