ตัวสร้าง CSS Unicode Range
สร้างค่า CSS unicode-range และกฎ @font-face สำหรับ Latin, Thai และ script อื่น ๆ ตรวจสอบ ranges คัดลอก CSS และดาวน์โหลด stylesheet ได้ใน browser โดยไม่อัปโหลดข้อมูล
Loading tool...
ตัวสร้าง CSS Unicode Range คืออะไร?
CSS Unicode Range Generator เป็นเครื่องมือฟรีบน browser สำหรับสร้าง descriptor unicode-range และกฎ @font-face สำหรับ web fonts เลือก preset ของ script หรือป้อน Unicode code point ranges เอง เพิ่ม metadata ของ font แล้วคัดลอก CSS ที่พร้อมใช้ โดยไม่ต้องอัปโหลดไฟล์
ประโยชน์หลัก
- แยก web fonts ตามภาษา หรือ script เพื่อลดการดาวน์โหลดที่ไม่จำเป็น
- เริ่มต้นด้วย Unicode blocks ของ Latin, Thai, Cyrillic, Greek และ Arabic
- ตรวจสอบ custom U+ ranges ก่อนนำไปใส่ใน stylesheet
- สร้าง @font-face metadata ที่สม่ำเสมอและมี font-display ให้ด้วย
- รักษาความเป็นส่วนตัวของ font configuration ด้วยการประมวลผลใน browser
กรณีการใช้งาน
- •ทำ optimization ให้เว็บไซต์หลายภาษาด้วย font files แยกตามภาษา
- •สร้าง Thai และ Latin font subsets เพื่อให้หน้าเว็บ render เร็วขึ้น
- •เตรียม CSS สำหรับ WOFF2 หรือ WOFF web fonts ที่ host เอง
- •ตรวจสอบ code point ranges ระหว่างตั้งค่า font subsetting pipeline
- •ระบุในเอกสารว่า font resource แต่ละไฟล์รองรับ script ใด
วิธีสร้าง CSS Unicode Range
- เลือกชุดตัวอักษร: เลือก preset Latin, Thai, Cyrillic, Greek, Arabic หรือ Latin Extended จากเมนูชุดตัวอักษร
- กรอกรายละเอียด Font: ระบุ font family, URL ของ font file, format, weight และ style สำหรับกฎ @font-face
- ตรวจสอบ Unicode ranges: ใช้ range จาก preset หรือเลือก Custom แล้วป้อน U+ ranges คั่นด้วย comma แก้ไขข้อความเตือนหากมี range ไม่ถูกต้อง
- คัดลอกหรือดาวน์โหลด CSS: คัดลอกกฎที่สร้างหรือดาวน์โหลด unicode-range.css แล้วนำไปเพิ่มใน stylesheet ของเว็บไซต์
คุณสมบัติหลัก
- เลือก preset สำหรับ script Latin, Latin Extended, Thai, Cyrillic, Greek และ Arabic
- ป้อน Unicode ranges แบบคั่นด้วย comma หรือ space พร้อม validation
- สร้างกฎ @font-face ครบทั้ง URL, format, weight และ style ของ font
- คัดลอก CSS ที่สร้างหรือดาวน์โหลดเป็น stylesheet ที่พร้อมใช้
- ทำงานใน browser โดยไม่ต้องอัปโหลดรายละเอียดของ font หรือข้อความ
คำถามที่พบบ่อย
CSS unicode-range ทำหน้าที่อะไร?
descriptor unicode-range จะจำกัดกฎ @font-face ให้ใช้กับ Unicode code points ที่กำหนด browser จึงดาวน์โหลด font resource เมื่อหน้าเว็บมีตัวอักษรใน range นั้นเท่านั้น
Unicode range มีรูปแบบอย่างไร?
range เริ่มด้วย U+ ตามด้วยเลขฐานสิบหก 1 ถึง 6 หลัก และอาจมี hyphen กับ code point ปลายทาง หลาย ranges คั่นด้วย comma ได้
ใช้กับ Thai fonts ได้หรือไม่?
ได้ โดย preset Thai ใช้ U+0E00-0E7F ซึ่งเป็น Thai Unicode block หลัก และคุณสามารถเพิ่ม ranges อื่นสำหรับ Latin punctuation หรือ symbols ได้
เครื่องมือนี้อัปโหลด font หรือข้อความหรือไม่?
ไม่ เครื่องมือสร้าง CSS จากค่าที่คุณป้อนเท่านั้น และการประมวลผลทั้งหมดทำงานภายใน browser