Unicode Range Generator: สร้าง @font-face subset ให้ฟอนต์ไทยและละตินอย่างมืออาชีพ

การส่งมอบ webfont แบบ custom ให้ผู้ใช้หลายภาษา ยากกว่าที่คิดไว้ตั้งแต่แรก ฟอนต์ที่รองรับอักษรละตินได้สวยงามอาจหนักขึ้นเป็นร้อยกิโลไบต์ทันที เมื่อคุณต้องการให้มันครอบคลุมภาษาไทย ซีริลลิก หรืออาหรับด้วย Unicode Range Generator แก้ปัญหานี้ด้วยกลไกมาตรฐานที่แม่นยำ นั่นคือ CSS unicode-range ที่ถูกห่อไว้ในกฎ @font-face พร้อมใช้งาน คัดลอกไปวางใน stylesheet ได้ทันที

กับดักที่นักพัฒนาหลายคนพลาดคือ หน้าเว็บภาษาไทยที่ชี้ไปยัง webfont ที่มีแต่อักษรละติน จะไม่แจ้ง error หรือ warning ใด ๆ เลย อักษรไทยจะ fall back ไปยังฟอนต์ระบบอย่างเงียบ ๆ ขณะที่ข้อความละตินรอบ ๆ แสดงผลด้วยฟอนต์ที่คุณเลือกมาอย่างตั้งใจ ผลลัพธ์คือ typography ปนกันแบบที่ไม่มีใครออกแบบไว้ unicode-range คือวิธีที่เว็บไซต์หลายภาษาใช้โหลดเฉพาะสิ่งที่จำเป็น — browser จะดาวน์โหลดไฟล์ฟอนต์เฉพาะเมื่อหน้านั้นใช้จริงกับอักขระที่อยู่ในช่วงที่ประกาศไว้ และจะข้ามการดาวน์โหลดไปเลยหากไม่มี

เครื่องมือ Unicode Range Generator สร้างค่า range เหล่านี้และกฎ @font-face ที่สมบูรณ์ให้คุณ ทั้งจาก preset ของสคริปต์ที่คัดสรรไว้แล้วหรือ custom range ที่คุณกำหนดเอง พร้อม live preview ของข้อความที่เรนเดอร์จริง ทุกอย่างทำงานฝั่ง client 100% ไม่มีการอัปโหลด ไม่ต้องสมัครสมาชิก และไฟล์ฟอนต์ของคุณไม่หลุดออกจากเครื่อง

ทำไมต้องใช้ Unicode Range Generator?

• มี preset สำหรับสคริปต์จริงที่ใช้บ่อย. ไม่ต้องจำขอบเขต code point เอง เลือก Latin (U+0000-00FF), Latin Extended (U+0100-024F, U+1E00-1EFF), Thai (U+0E00-0E7F), Cyrillic (U+0400-04FF), Greek (U+0370-03FF) หรือ Arabic (U+0600-06FF) จาก dropdown ได้ทันที
• ได้กฎ @font-face ที่สมบูรณ์ ไม่ใช่แค่เศษโค้ด. เครื่องมือสร้างทั้งกฎ ตั้งแต่ font-family, src ตาม format ที่เลือก, font-weight, font-style, font-display: swap ไปจนถึง descriptor unicode-range วางลง stylesheet แล้วใช้ได้เลย
• Live preview ของข้อความที่เรนเดอร์. พิมพ์ข้อความตัวอย่างแล้วเห็นผลลัพธ์ทันที เป็นวิธีเร็วที่สุดในการยืนยันว่า subset ของคุณครอบคลุมอักขระที่ผู้ใช้จะเห็นจริง
• รองรับ custom range สำหรับเคสพิเศษ. ค่าที่คั่นด้วย comma หรือช่องว่าง เช่น U+0000-00FF, U+0E00-0E7F จะถูกตรวจสอบและรวมเป็น descriptor เดียวที่สะอาด ทำให้ icon font หรือช่วงสัญลักษณ์เฉพาะทางใช้งานได้ง่ายเท่า preset ทั่วไป
• คัดลอกหรือดาวน์โหลดเป็น CSS. กดคัดลอกไปยัง clipboard หรือดาวน์โหลดเป็นไฟล์ .css พร้อมหย่อนลง build output ได้เลย
• ประมวลผลฝั่ง client 100%. ทุกการคำนวณเกิดขึ้นใน browser ของคุณ ชื่อฟอนต์ URL และ range ต่าง ๆ ไม่เคยถูกส่งไปยังเซิร์ฟเวอร์ใด

คุณสมบัติหลัก

มีรายละเอียดน่าสนใจอีกเล็กน้อย descriptor font-display: swap ถูกใส่มาให้ตั้งแต่แรก ข้อความจึงแสดงทันทีด้วยฟอนต์ fallback แล้วค่อยเปลี่ยนเมื่อ subset โหลดเสร็จ ไม่มีอาการข้อความล่องหน กฎที่สร้างให้เป็นแบบ deterministic และกระชับ diff ใน git จึงสะอาดเวลา commit ลง stylesheet และเพราะเป็นเครื่องมือฝั่ง client ล้วน เมื่อหน้าโหลดแล้วก็ใช้งานได้แม้ออฟไลน์

วิธีการใช้งาน

1. เปิด Unicode Range Generator. เครื่องมือโหลดทันทีโดยเลือก preset Latin ไว้ให้แล้ว
2. เลือก preset ชุดอักขระ จาก dropdown — Latin, Latin Extended, Thai, Cyrillic, Greek หรือ Arabic — หรือสลับไปโหมด Custom แล้วกรอก range ของคุณเอง เช่น U+0E01-0E5B สำหรับอักษรไทย
3. กรอกข้อมูลฟอนต์: ชื่อ family ที่จะอ้างถึงใน CSS, URL ของไฟล์ subset, format, weight และ style
4. ตรวจ live preview. พิมพ์หรือวางข้อความตัวอย่าง ลองสตริงผสมไทย-อังกฤษอย่าง "สวัสดี Hello" แล้วยืนยันว่าทุก glyph แสดงด้วยฟอนต์ที่ตั้งใจไว้
5. คัดลอกกฎ @font-face ที่สร้างให้ ไปยัง clipboard หรือดาวน์โหลดเป็นไฟล์ .css แล้ววางลง stylesheet ทำซ้ำกับทุก subset ที่ต้องใช้

เข้าใจ Script Subsets โดยไม่ต้องเป็นกูรู

Descriptor unicode-range บอก browser ว่าไฟล์ฟอนต์หนึ่ง ๆ ครอบคลุม code point ใดของ Unicode เมื่อหน้าเว็บเรนเดอร์ข้อความ browser จะเทียบอักขระแต่ละตัวกับช่วงที่ประกาศไว้ในกฎ @font-face ทุกตัวที่ลงทะเบียนไว้ แล้วเลือกใช้ฟอนต์ที่ตรงกัน สิ่งสำคัญคือมันยังหน่วงการดาวน์โหลดด้วย ไฟล์ฟอนต์จะถูกดึงมาเฉพาะเมื่อมีอักขระอย่างน้อยหนึ่งตัวบนหน้านั้นตกอยู่ในช่วงของไฟล์ นั่นคือกลยุทธ์ทั้งหมดของ font subsetting ในประโยคเดียว ประกาศช่วงให้แคบ ส่งไฟล์ที่เล็ก แล้วปล่อยให้ browser ดึงเฉพาะสิ่งที่หน้านั้นต้องใช้จริง

ไวยากรณ์ U+ รองรับสามรูปแบบ code point เดี่ยวอย่าง U+0E48 ระบุอักขระตัวเดียว (ในที่นี้คือวรรณยุกต์ไม้เอกของภาษาไทย) ช่วงอย่าง U+0E01-0E5B ครอบคลุมทุก code point ระหว่างปลายทั้งสองข้าง และ wildcard อย่าง U+0E?? ครอบคลุมทุก code point ที่เลขฐานสิบหกสองตัวแรกเป็น 0E คุณผสมหลายรูปแบบด้วย comma ได้ และเครื่องมือจะจัดรูปแบบรายการให้เอง

รูปแบบมาตรฐานสำหรับเว็บไทยคือหนึ่งกฎ @font-face ต่อหนึ่ง subset ใช้ชื่อ font-family เดียวกันแต่ชี้ไปยังไฟล์และช่วงต่างกัน

@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-thai.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0E01-0E5B;
}

เมื่อวางแบบนี้ไว้ หน้าภาษาอังกฤษจะดาวน์โหลดเฉพาะ subset ละตินขนาด 10-20 KB ส่วนหน้าภาษาไทยดึงเฉพาะ subset ไทยแทน descriptor font-display: swap เข้าคู่กับแนวทางนี้อย่างเป็นธรรมชาติ ข้อความถูกวาดทันทีด้วยฟอนต์ fallback ของระบบแล้วสลับไปยัง subset เมื่อมาถึง ประสบการณ์ที่ผู้ใช้รับรู้จึงยังลื่นแม้เน็ตช้า ฟอนต์ไทยบวกละตินแบบเต็มชุดมักหนักเกิน 200 KB การทำ subset ช่วยลดขนาดที่ต้องส่งได้ครึ่งหนึ่งขึ้นไปเป็นปกติ และมากกว่านั้นมากในกรณีฟอนต์ CJK ที่อาจใหญ่หลายเมกะไบต์ ขณะที่ subset เฉพาะสคริปต์เป็นเพียงเศษเสี้ยวของไฟล์เต็ม

มีประเด็นละเอียดน่ารู้อีกอย่าง บล็อก Unicode ของภาษาไทยเต็มช่วงคือ U+0E00-0E7F ซึ่ง preset Thai ของเครื่องมือใช้ค่านี้พอดี ส่วนช่วงที่แคบกว่าอย่าง U+0E01-0E5B ก็ยังครอบคลุมอักขระไทยที่ถูกกำหนดไว้ทุกตัว ตั้งแต่พยัญชนะ สระ วรรณยุกต์ เลขไทย ไปจนถึงเครื่องหมายไทยเฉพาะ โดยข้าม code point ที่ยังไม่ถูกกำหนดที่ขอบบล็อก ใช้ค่าไหนก็ได้ แบบแคบกว่าจะสะอาดกว่าเล็กน้อย

กรณีการใช้งานจริง

เว็บไซต์สองภาษาไทย-อังกฤษ

นี่คือ use case เด็ดที่สุด พอร์ทัลภาครัฐ ร้านค้าอีคอมเมิร์ซ และเว็บข่าวไทยผสมสองสคริปต์ในหน้าเดียวตลอดเวลา พาดหัวภาษาไทยอยู่เหนือชื่อสินค้าภาษาอังกฤษ ราคาเงินบาทคู่กับรหัส SKU ละติน การประกาศ subset ละตินและไทยแยกกันภายใต้ชื่อ family เดียว ทำให้แต่ละหน้าภาษาโหลดเฉพาะ glyph ของตัวเอง และสตริงผสมก็เรนเดอร์ได้สม่ำเสมอเพราะทั้งสอง subset มาจาก typeface เดียวกัน

Icon font

Icon font ที่วางอยู่บน private use area มักอยู่ใน code point อย่าง U+E600-U+E6FF การกำหนดขอบเขตด้วย unicode-range รับประกันว่าฟอนต์ข้อความของคุณจะไม่ไปชิง code point เหล่านั้นโดยบังเอิญ และช่วยแยกไอคอนกับตัวหนังสือออกเป็นไฟล์ที่แคชได้อิสระต่อกัน พิมพ์ช่วงไอคอนลงช่อง custom แล้วเครื่องมือจะสร้างกฎให้

เนื้อหาผสมภาษา CJK

ฟอนต์ญี่ปุ่น จีน และเกาหลีใหญ่มาก จึงเป็นที่มาของระบบ subset แบบหั่นเป็นชิ้น unicode-range คือกลไกที่ชิ้นส่วนเหล่านั้นใช้งานจริง กฎ @font-face เล็ก ๆ หลายสิบตัว ตัวละช่วงแคบ ๆ แล้วให้ browser ดึงเฉพาะช่วงที่หน้านั้นใช้ ช่อง custom range ของเครื่องมือรองรับทุกช่วงที่คุณต้องการ

ปรับแต่งประสิทธิภาพ

เมื่อ Lighthouse ติงปัญหาฟอนต์ที่บล็อกการเรนเดอร์ หรือคุณเห็น layout shift จากการสลับ glyph ช้า ๆ แนวทาง subset ก่อนคือคำตอบ ใช้เครื่องมือสร้างกฎแยกตามสคริปต์ เติม font-display: swap แล้ววัดผล หลายทีมเปลี่ยนคำขอฟอนต์เดียวที่บล็อกหน้า ให้กลายเป็นคำขอเล็ก ๆ หลายคำขอที่ทำงานตามต้องการและเสร็จภายใน first paint

แนวทางปฏิบัติที่ดีที่สุด

• แยก subset webfont ตามสคริปต์และใช้ชื่อ font-family เดียว. กฎ @font-face หลายตัวที่ใช้ family เดียวกันแต่ range ต่างกันจะทำงานร่วมกันโดยอัตโนมัติ browser จะประกอบมาเป็นฟอนต์ตรรกะหนึ่งชุด
• ทดสอบ glyph coverage กับเนื้อหาจริง. วางหัวข้อและข้อความ UI จริงของคุณลงใน live preview subset ที่พลาดสระอำหรือสัญลักษณ์บาทจะทำให้คุณเสียหน้าใน production
• รักษา fallback stack ให้ครบ. รายการ font-family ของคุณต้องมีฟอนต์ระบบที่ครอบคลุมทุกสคริปต์บนหน้า เพื่อให้ข้อความอ่านได้ระหว่างการสลับและกรณี subset โหลดไม่สำเร็จ
• จับคู่กับ font-display: swap เสมอ. ค่านี้ถูกใส่มาในกฎที่สร้างให้ด้วยเหตุผล ข้อความล่องหนแย่กว่าข้อความที่ฟอนต์ต่างชั่วคราวเสมอ
• ระวังเรื่อง format ของไฟล์. เสิร์ฟ woff2 เป็นอันดับแรก เติม woff หรือ truetype ในรายการ src เฉพาะเมื่อต้องรองรับ browser รุ่นเก่า
• ตรวจ range ซ้ำหลังอัปเดตฟอนต์. หากเปลี่ยน typeface หรืออัปเดตเวอร์ชัน ให้ลองอักขระชุดเดิมผ่าน preview อีกครั้งเพื่อยืนยันว่าไม่มีอะไรเลื่อน

เริ่มทำ subset ของคุณภายในหนึ่งนาที

เข้าไปที่ Unicode Range Generator เลือก preset ไทยหรือละติน วางข้อความตัวอย่างลง preview แล้วคัดลอกกฎ @font-face ที่พร้อมใช้ใน production ฟรี ทันที และทำงานฝั่ง client ทั้งหมด ตรงตามที่เครื่องมือสำหรับจัดการฟอนต์ควรเป็น

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• CSS Font Stack Generator — สร้าง font-family stack ที่แข็งแรง ใช้คู่กับ subset ของคุณได้ลงตัว
• Text to Braille Translator — สำรวจว่าข้อความแปลงไปยังระบบการเขียน Unicode อื่นอย่างไร
• CSS Unit Converter — แปลง px, rem, em และหน่วยอื่น ๆ เพื่อ typography ที่แม่นยำ

ขอให้สนุกกับการทำ subset ฟอนต์!

คำถามที่พบบ่อย

ถ: unicode-range ช่วยลดจำนวน HTTP request ได้หรือไม่?

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

ถ: ถ้า glyph หายไปจาก subset จะเกิดอะไรขึ้น?

ตอบ: browser จะไล่ลงตาม font-family stack ของคุณและเรนเดอร์อักขระด้วยฟอนต์ถัดไปที่ครอบคลุมมัน สุดท้ายถึงฟอนต์ fallback ของระบบ นั่นคือเหตุผลที่ต้องรักษา fallback stack ให้ครบ ช่องว่างของ coverage จะเสื่อมลงอย่างสวยงามแทนที่จะโชว์กล่อง tofu

ถ: ใส่หลาย range ในกฎ @font-face เดียวได้ไหม?

ตอบ: ได้ คั่นด้วย comma เช่น unicode-range: U+0000-00FF, U+2000-206F แล้วฟอนต์จะใช้กับทุก code point ในรายการ เครื่องมือรับ input แบบคั่น comma หรือช่องว่างและจัดรูปแบบให้เอง

ถ: preset Thai ค่า U+0E00-0E7F ต่างจาก U+0E01-0E5B อย่างไร?

ตอบ: ต่างกันเล็กน้อย ค่าแรกคือบล็อก Unicode ไทยทั้งบล็อกรวม code point ที่ยังไม่ถูกกำหนด ส่วนค่าหลังครอบคลุมอักขระไทยที่ถูกกำหนดแล้วทุกตัวตั้งแต่ ก ไก่ ไปจนถึงเครื่องหมายคมุต ทั้งสองแบบแสดงข้อความไทยจริงได้ครบ เลือกใช้แบบใดก็ได้ เครื่องมือรองรับทั้งคู่ผ่าน preset หรือ custom input

ถ: เครื่องมืออัปโหลดฟอนต์ของฉันไปที่ใดหรือเปล่า?

ตอบ: เปล่าเลย Unicode Range Generator ทำงานฝั่ง client 100% ไม่เคยรับชื่อฟอนต์ URL ข้อความตัวอย่างหรือ CSS ที่สร้างของคุณ ทุกอย่างเกิดขึ้นภายในแท็บ browser ของคุณเท่านั้น