ตัวสร้าง CSS Font Stack
สร้าง font-family stack ที่แข็งแรงพร้อม system-font fallbacks ทุกแพลตฟอร์ม พร้อม preview สด คัดลอกเป็น CSS หรือ Tailwind config ได้ ฟรี
Loading tool...
ตัวสร้าง CSS Font Stack คืออะไร?
ตัวสร้าง CSS font stack สร้าง declaration font-family ที่มี fallbacks ซ้อนกันเพื่อให้ typography สม่ำเสมอและอ่านง่ายบนทุกแพลตฟอร์ม เลือก stack ที่คัดสรรแล้ว เช่น system-ui หรือ sans สำหรับภาษาไทย ดูตัวอย่างด้วยข้อความของคุณเอง แล้วส่งออกเป็น CSS หรือ Tailwind config
ประโยชน์หลัก
- Typography สม่ำเสมอข้ามแพลตฟอร์ม
- system fonts ไม่ต้องโหลด
- fallbacks ที่อ่านได้เสมอ
- คัดลอกได้ในคลิกเดียว
กรณีการใช้งาน
- •design systems
- •typography เว็บแอป
- •เว็บไซต์ภาษาไทย
- •โปรเจกต์ Tailwind
วิธีสร้าง CSS Font Stack
- เลือกพรีเซ็ต: เลือก stack เช่น System UI หรือแบบรองรับภาษาไทย
- ดูตัวอย่างสด: พิมพ์ข้อความทดลองและปรับขนาดฟอนต์
- คัดลอก CSS: นำ font-family rule ไปใช้ใน stylesheet
- หรือคัดลอก Tailwind: วาง config snippet ลงใน tailwind.config
คุณสมบัติหลัก
- พรีเซ็ต font stack 6 แบบ ผ่านการใช้งานจริง
- Preview สดที่ render ด้วย stack จริง
- ปรับขนาด preview ได้ตั้งแต่ 12px ถึง 48px
- คัดลอกเป็น CSS font-family ได้ทันที
- คัดลอกเป็น Tailwind config พร้อมวาง
- ทำงาน offline ในเบราว์เซอร์ของคุณ
คำถามที่พบบ่อย
CSS font stack คืออะไร?
Font stack คือรายการฟอนต์แบบมีลำดับใน property font-family เบราว์เซอร์จะลองใช้ทีละตัวตามลำดับ และใช้ตัวแรกที่มีในอุปกรณ์
ทำไมต้องใส่ sans-serif ไว้ท้ายสุด?
Generic family อย่าง sans-serif เป็นทางเลือกสุดท้ายที่การันตีว่ามีเสมอ ข้อความจึงยังแสดงผลได้แม้ฟอนต์ที่ระบุจะหายทั้งหมด
system-ui คืออะไร?
system-ui จับคู่กับฟอนต์ของระบบปฏิบัติการ เช่น SF Pro บน Apple, Segoe UI บน Windows และ Roboto บน Android แสดงผลทันทีไม่ต้องโหลด
Stack ไหนเหมาะกับข้อความภาษาไทย?
ใช้ stack ที่ขึ้นต้นด้วยฟอนต์ไทยแท้อย่าง IBM Plex Sans Thai, Sarabun หรือ Noto Sans Thai ตามด้วย Tahoma และ sans-serif เป็น fallbacks