Font File Converter: ตรวจสอบไฟล์ฟอนต์ TTF, OTF, WOFF และ WOFF2 ในเบราว์เซอร์

ไฟล์ font ดูเหมือนเป็นอะไรที่เรียบง่าย แค่ดับเบิลคลิกติดตั้งแล้วข้อความก็แสดงผลสวยงาม แต่พอเกิดปัญหาขึ้นมาจริง ๆ มักวินิจฉัยยากกว่าที่คิด บางที font ที่แสดงผลได้ปกติในเครื่องเรากลับเพี้ยนในเครื่องเพื่อนร่วมงาน, ไฟล์ที่คิดว่าเป็นตัวหนากลับเป็น family อื่นไปเลย หรือไฟล์ WOFF2 ที่ดาวน์โหลดมากลับโหลดไม่ขึ้น การหาสาเหตุพวกนี้มักต้องพึ่งซอฟต์แวร์บนเดสก์ท็อปหรือไล่อ่าน binary table ของไฟล์ font ด้วยตัวเอง

Font File Converter ช่วยขจัดปัญหานี้ได้ เครื่องมือฟรีบนเบราว์เซอร์ตัวนี้ทำงานบน opentype.js โหลดไฟล์ TTF, OTF, WOFF และ WOFF2 แบบ local ตรวจจับรูปแบบไฟล์ (format) อ่านค่า family, subfamily, units per em และจำนวน glyph พร้อมแสดงพรีวิวของตัวฟอนต์ให้ดูทันที ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์แต่อย่างใด

ในบทความนี้เราจะพาไปดูว่าเครื่องมือนี้ทำอะไรได้บ้าง ฟอร์แมต font ทั้งสี่แบบต่างกันอย่างไร และวิธีใช้ข้อมูลจากการตรวจสอบเหล่านี้ช่วยตัดสินใจเวลาส่ง web font ขึ้นใช้งานจริง

ทำไมต้องใช้ Font File Converter?

• ตรวจจับ format ได้ทันที วางไฟล์ลงไปปุ๊บ เครื่องมือจะบอกทันทีว่าคุณกำลังถือไฟล์ TTF, OTF, WOFF หรือ WOFF2 โดยไม่ต้องเชื่อนามสกุลไฟล์ ซึ่งผิดบ่อยกว่าที่หลายคนคิด
• อ่าน metadata ได้เชื่อถือได้ ชื่อ family และ subfamily มาจาก name table ข้างในไฟล์ font โดยตรง คุณจะเห็นว่าตอนติดตั้งหรือเรียกผ่าน @font-face แล้วฟอนต์จะถูกเรียกว่าอะไรจริง ๆ ไม่ใช่แค่ชื่อไฟล์ที่ตั้งมั่ว
• เห็นจำนวน glyph ในครั้งเดียว font ที่มี 300 หรือ 3,000 glyph บอกได้ว่าเป็น subset เบา ๆ หรือเวอร์ชันเต็มที่รองรับหลายภาษา ซึ่งกระทบทั้งขนาดไฟล์และความครอบคลุมของตัวอักษรโดยตรง
• เปิดเผยค่า units per em ตัวเลขที่ดูเป็นเรื่องเทคนิคนี้ (มักเป็น 1,000 หรือ 2,048) กำหนดกริดพิกัดภายในของ font และมีผลต่อการย่อขยายฟอนต์ เครื่องมือดึงค่านี้ขึ้นมาให้โดยที่คุณไม่ต้องไง้ไล่อ่าน table เอง
• พรีวิวแบบเรียลไทม์ ตัวเลขมีประโยชน์ แต่การเห็นตัวอักษรจริง ๆ ที่วาดจาก outline ข้างในไฟล์ยืนยันได้ว่าไฟล์ใช้งานได้และเป็นดีไซน์ที่คุณคาดหวัง
• เป็นส่วนตัว 100% การตรวจสอบทั้งหมดรันในเบราว์เซอร์ผ่าน opentype.js ไฟล์ font ซึ่งมักเป็น asset ที่ซื้อมาด้วยลิขสิทธิ์ของคุณ จะไม่หลุดออกจากเครื่องไปไหนแน่นอน

ฟีเจอร์หลัก

จุดที่น่ารู้เพิ่มเติม:

• opentype.js อ่าน binary table ของไฟล์ font ด้วยวิธีเดียวกับเครื่องมือดีไซน์ระดับมืออาชีพ ค่า metadata ที่คุณเห็นจึงตรงกับที่ซอฟต์แวร์อื่นจะอ่านจากไฟล์เดียวกัน
• พรีวิววาดจาก glyph outline ที่ parse ได้จริง ถ้าไฟล์เสียหายหรือถูกตัดให้สั้นลง คุณมักจะเห็นความผิดปกติตรงนี้ก่อนไปเจอกลางโปรเจกต์
• เพราะทุกอย่างทำงานในเบราว์เซอร์ เครื่องมือจึงยังใช้ได้แม้เน็ตจะอ่อนไหว เพียงแค่โหลดหน้าเว็บเสร็จแล้ว

วิธีใช้งาน Font File Converter

1. วางไฟล์ font ลงไป ลากไฟล์ TTF, OTF, WOFF หรือ WOFF2 มาวางบน drop zone หรือคลิกเพื่อเลือกไฟล์จากเครื่อง การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ
2. ดูรูปแบบไฟล์ที่ตรวจพบ เครื่องมือจะรายงาน format ของไฟล์ทันที ลองเทียบกับนามสกุลไฟล์ดู ไฟล์ชื่อ .ttf แต่จริง ๆ แล้วเป็น WOFF เป็นเรื่องที่เจอบ่อยกว่าที่คิด
3. ตรวจค่า family และ subfamily ดูชื่อ family และ subfamily ในแผง metadata เพื่อดูว่าฟอนต์แนะนำตัวเองว่าอย่างไร และที่คุณมีอยู่เป็นตัว Regular หรือเป็นเวอร์ชัน Bold, Italic หรือ Condensed
4. เช็กจำนวน glyph ใช้ตัวเลข glyph count ประเมินความครอบคลุม ถ้าน้อยมากน่าจะเป็น subset แต่ถ้าสูงมากแปลว่ารองรับภาษาเพิ่มเติมหรือชุดสัญลักษณ์ขนาดใหญ่
5. ดูพรีวิวของฟอนต์ ดูตัวอักษรที่วาดจาก outline ของไฟล์เอง เพื่อยืนยันว่าฟอนต์แสดงผลได้ครบและตรงกับดีไซน์ที่คุณคาดไว้

เปรียบเทียบ TTF, OTF, WOFF และ WOFF2

แต่ละฟอร์แมตคืออะไรและเหมาะกับงานแบบไหน TTF (TrueType Font) คือฟอร์แมตคลาสสิกสำหรับเดสก์ท็อป พัฒนาโดย Apple และ Microsoft ช่วงปลายทศวรรษ 1980 และยังเป็นค่าเริ่มต้นสำหรับติดตั้ง font ในระบบ Windows และ macOS ส่วน OTF (OpenType Font) ใช้ outline แบบ PostScript พร้อมฟีเจอร์ typographic ขั้นสูงอย่าง ligature, contextual alternate และ small caps จึงเป็นที่นิยมในหมู่นักออกแบบอาชีพ WOFF (Web Open Font Format) ไม่ใช่ฟอร์แมต outline ใหม่ แต่เป็น wrapper สำหรับบีบอัดข้อมูล TTF หรือ OTF ที่สร้างมาเพื่อส่ง font ผ่านเว็บโดยเฉพาะ และ WOFF2 คือรุ่นถัดมาที่ทุกเบราว์เซอร์ยุคใหม่คาดหวังเป็นอันดับแรก

การบีบอัดแบบ WOFF2 เพื่อส่งมอบบนเว็บ WOFF2 ใช้อัลกอริทึมบีบอัด Brotli ซึ่งทำให้ไฟล์เล็กลงราว 30% เมื่อเทียบกับ WOFF และเล็กกว่าไฟล์ TTF ดิบได้ถึงราว 50% ถ้าหน้าเว็บโหลดฟอนต์สักสามถึงสี่น้ำหนัก ความต่างนี้สะสมเป็นความเร็วในการแสดงผลครั้งแรกและค่า bandwidth ที่ต่ำลงอย่างชัดเจน เบราว์เซอร์หลักทุกตัวรองรับ WOFF2 ตั้งแต่ราวปี 2016 จึงกลายเป็นมาตรฐาน de facto ของการส่ง web font โดยมี WOFF เก็บไว้เป็น fallback สำหรับเบราว์เซอร์เก่า

units per em คืออะไรและสำคัญอย่างไร ทุก font วาดบนกริดพิกัดภายใน และ units per em คือจำนวนหน่วยที่ประกอบเป็น em square ซึ่งเป็นขนาดอ้างอิงของฟอนต์ ฟอนต์สาย PostScript นิยมใช้ 1,000 หน่วย ส่วน TrueType มักใช้ 2,048 ค่าที่สูงกว่าให้ความละเอียดที่ละเอียดขึ้นสำหรับเส้นโค้งและระยะห่าง ซึ่งมีผลต่อคุณภาพการ hinting และการย่อขนาดในจุดที่เล็กมาก ถ้า font สองเวอร์ชันของ family เดียวกันรายงาน units per em ไม่เท่ากัน เกือบจะแน่นอนว่ามาจากแหล่งหรือคนละรุ่นกัน

จำนวน glyph และ subset font font ที่มีแค่ภาษาอังกฤษพื้นฐานอาจมี glyph ไม่กี่ร้อยตัว แต่เวอร์ชันเต็มที่มี Cyrillic, Greek และเครื่องหมายวรรคตอนเพิ่มเติมอาจเป็นพัน ๆ ตัว ส่วนฟอนต์ CJK สามารถไปถึงหลักหมื่นได้ การทำ subsetting บนเว็บคือการตัด font ให้เหลือเฉพาะตัวอักษรที่เว็บต้องใช้ ช่วยลดขนาดไฟล์ได้มหาศาล การดู glyph count จึงบอกคุณได้ว่ากำลังถืออะไรอยู่ ถ้า font ที่อ้างว่า "เต็มรูปแบบ" มี glyph แค่ไม่กี่สิบตัว นั่นคือสัญญาณที่ชัดที่สุดว่าคุณได้รับ subset มาแทน

ข้อควรระวังเรื่อง metadata เรื่องลิขสิทธิ์ ไฟล์ font มีฟิลด์ชื่อและคำอธิบาย license ฝังอยู่ เครื่องมือจะแสดงสิ่งที่ไฟล์อ้างว่าเป็นความจริงให้คุณเห็น แต่ให้ถือว่าเป็นข้อมูลเชิงอ้างอิงเท่านั้น เพราะ metadata ถูกตัดทิ้งระหว่างการแปลงไฟล์ ถูกคัดลอกมาจาก font อื่น หรือล้าสมัยได้ สิทธิ์ในการฝัง font ลงเว็บเชิงพาณิชย์กำหนดโดยเงื่อนไข license ของผู้ผลิตฟอนต์ (foundry) ซึ่งการตรวจไฟล์แทนไม่ได้

ตัวอย่างการใช้งานจริง

เตรียม web font ก่อนขึ้น production

ก่อนปล่อยเวอร์ชันใหม่ ลองรันไฟล์ font ทุกตัวผ่านเครื่องมือตรวจสอบ ยืนยันว่าแต่ละไฟล์เป็น WOFF2 ที่คุณตั้งใจจะส่งจริง จด string ของ family และ subfamily ที่แน่นอน และเช็กว่าจำนวน glyph ตรงกับความครอบคลุมตัวอักษรที่เว็บต้องใช้ ใช้เวลาแค่ห้านาทีแต่ช่วยกันเรื่องเซอร์ไพรส์วันเปิดตัวอย่างไฟล์ชื่อผิดได้ทั้งหมด

ตรวจสอบคลัง font ของทีม

ทีมงานสะสม font กันมาหลายปี โฟลเดอร์จึงเต็มไปด้วยไฟล์ซ้ำ ไฟล์ที่เปลี่ยนชื่อ และฟอร์แมตปนกัน การโหลดไฟล์แต่ละตัวเข้าเครื่องมือช่วยจับไฟล์ซ้ำได้ทันที สองไฟล์ที่อ้าง family และ subfamily เดียวกันมักเป็นเวอร์ชันเดียวกันใน container ต่างกัน และช่วยระบุไฟล์ที่ format จริงไม่ตรงกับนามสกุลอีกด้วย

เช็กว่า font ที่ดาวน์โหลดมาสมบูรณ์

font จากเว็บดาวน์โหลดฟรีบางครั้งมาแบบถูกตัดให้สั้นลงหรือแปลงครึ่ง ๆ กลาง ๆ ไฟล์ที่สมบูรณ์จะ parse ได้สะอาด รายงานจำนวน glyph ที่สมเหตุสมผล และแสดงพรีวิวครบถ้วน ถ้าเจอ glyph แค่หลักสิบบน font ที่อ้างว่ารองรับหลายภาษา หรือพรีวิววาดออกมาเป็นกล่อง ๆ นั่นแปลว่าไฟล์ไม่ครบก่อนที่มันจะไปถึงโปรเจกต์ของคุณ

เตรียมข้อมูลสำหรับ CSS @font-face

กฎ @font-face จะล้มเหลวแบบเงียบ ๆ เมื่อชื่อ family ที่ประกาศไม่ตรงกับชื่อภายในของ font ตรวจไฟล์ก่อน แล้วคัดลอก family และ subfamily ตามที่เครื่องมือรายงานแบบเป๊ะ ๆ สไตล์ชีตของคุณจะชี้ไปที่ font ถูกตั้งแต่ครั้งแรก ไม่ต้องมาไล่ debug ใน DevTools แบบลองผิดลองถูก

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

• ใช้ WOFF2 บน production เป็นฟอร์แมตที่เล็กที่สุดและรองรับดีที่สุดบนเบราว์เซอร์ยุคใหม่ทุกตัว เก็บ WOFF ไว้เฉพาะเมื่อต้องรองรับเบราว์เซอร์เก่ามากจริง ๆ
• เก็บไฟล์ต้นฉบับเป็น TTF หรือ OTF รักษา master ที่แก้ไขได้ไว้อย่างน้อยหนึ่งไฟล์ เพื่อให้ subset แปลงฟอร์แมตหรือสร้างไฟล์เว็บใหม่ได้ในภายหลังโดยไม่เสียคุณภาพ
• ตรวจ license แยกต่างหาก แผง metadata แสดงสิ่งที่ไฟล์พูดถึงตัวเอง แต่เงื่อนไขการใช้งานจริงอยู่ที่ foundry ควรยืนยันสิทธิ์การฝังบนเว็บก่อนเปิดตัวงานเชิงพาณิชย์
• ทำ subset กับ font ขนาดใหญ่ ถ้าจำนวน glyph สูงมากแต่เว็บคุณใช้แค่ภาษาอังกฤษ การ subset ช่วยลดขนาดไฟล์ได้มหาศาล และอย่าลืมตรวจไฟล์หลัง subset ซ้ำเพื่อยืนยันความครอบคลุม
• ยืนยันชื่อก่อนเขียน CSS ให้ชื่อ family ใน @font-face ตรงกับค่า metadata ที่ตรวจพบ ไม่ใช่ชื่อไฟล์
• ตรวจไฟล์ซ้ำหลังทุกการแปลง กระบวนการแปลงไฟล์บางครั้งผลิตไฟล์ที่เสียหายหรือถูกตัดข้อมูล การลองผ่านเครื่องมือสักรอบจะจับปัญหานี้ได้ทันที

พร้อมดูข้างในไฟล์ font ของคุณหรือยัง เปิด Font File Converter วางไฟล์ลงไป แล้วดู format, metadata และพรีวิวได้ในไม่กี่วินาที ฟรี เป็นส่วนตัว และทำงานทั้งหมดในเบราว์เซอร์ของคุณ

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

• CSS Font Stack Generator — สร้าง font-family stack ที่แข็งแรง เข้าคู่กับ font ที่คุณเพิ่งตรวจสอบได้พอดี
• Image Format Converter — แปลงรูปภาพระหว่างฟอร์แมตด้วยแนวทางเดียวกันคือทำงานในเบราว์เซอร์ ไม่ต้องอัปโหลด
• Base64 Encoder — เข้ารหัสข้อมูล font หรือ asset อื่น ๆ สำหรับฝังแบบ inline ใน CSS หรือ HTML

ขอให้สนุกกับการตรวจสอบ font!

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

ถ: ไฟล์ font ของฉันถูกอัปโหลดขึ้นเซิร์ฟเวอร์หรือเปล่า? ตอบ: ไม่ครับ เครื่องมือทำงานทั้งหมดในเบราว์เซอร์ผ่าน opentype.js ไฟล์ font จะถูก parse ในเครื่องของคุณเองและไม่เคยออกจากอุปกรณ์ไปไหน

ถ: Font File Converter ตรวจสอบฟอร์แมตไฟล์ไหนได้บ้าง? ตอบ: รองรับไฟล์ TTF, OTF, WOFF และ WOFF2 โดยเครื่องมือจะตรวจจับ format จริงของไฟล์ที่โหลดเข้ามา ซึ่งอาจต่างจากนามสกุลที่ไฟล์ติดมาก็ได้

ถ: ค่า units per em แปลว่าอะไร? ตอบ: คือจำนวนหน่วยภายในที่ประกอบเป็น em square หรือกริดการออกแบบพื้นฐานของ font ค่าที่พบบ่อยคือ 1,000 สำหรับฟอนต์สาย PostScript และ 2,048 สำหรับ TrueType ยิ่งค่าสูง ก็ยิ่งให้ความละเอียดในการวาด glyph outline ได้ละเอียดขึ้น

ถ: เครื่องมือบอกได้ไหมว่าฉันใช้ font ตัวนี้เชิงพาณิชย์ได้หรือไม่? ตอบ: ไม่ได้ครับ เครื่องมืออ่านเฉพาะ metadata ที่ฝังมากับไฟล์ ซึ่งอาจมีข้อความอธิบาย license รวมอยู่ด้วย แต่สิทธิ์การใช้งานจริงกำหนดโดยข้อตกลง license กับผู้ผลิตหรือนักออกแบบฟอนต์ ควรตรวจสอบเงื่อนไขการอนุญาตแยกต่างหากเสมอ