ดาวน์โหลดโปรแกรมฟรี
       
   สมัครสมาชิก   เข้าสู่ระบบ
THAIWARE.COM | ทิปส์ไอที
 

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?

เมื่อ :
|  ผู้เข้าชม : 27,080
เขียนโดย :
0 %E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B9%81%E0%B8%9A%E0%B8%9A+OTF%2C+TTF+%E0%B9%81%E0%B8%A5%E0%B8%B0+WOFF+%E0%B9%81%E0%B8%95%E0%B8%81%E0%B8%95%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3+%3F
A- A+
แชร์หน้าเว็บนี้ :

ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?

ในเว็บไซต์ Thaiware.com ของเราเคยมีบทความที่ พูดถึง ฟอนต์ (Fonts) และ Typeface กันไปแล้ว ครั้งนี้เรามาพูดถึงรูปแบบของฟอนต์กันบ้าง

เคยสังเกตไหมว่าเวลาที่เราดาวน์โหลดฟอนต์มา เราจะพบว่าตัวไฟล์หากไม่ใช่นามสกุล หรือตระกูล .TTF ก็จะเป็น .OTF และถ้าหากคุณเป็นนักพัฒนาเว็บไซต์ ก็อาจจะรู้จักกับฟอนต์ที่เป็นนามสกุล .WOFF ด้วย  ทั้งสามนามสกุลนี้มันแตกต่างกันอย่างไร ?

รูปแบบของฟอนต์ที่ใช้งานกันในปัจจุบันนี้ หลัก ๆ จะมีอยู่ 2 ชนิด คือ OTF และ TTF แต่ก็จะมีอีกรูปแบบหนึ่งที่สามารถแยกออกไปเป็นอีกประเภทได้ นั่นก็คือ WOFF ซึ่งเป็นฟอนต์ที่ใช้บนโลกอินเทอร์เน็ต

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

เนื้อหาภายในบทความ

ไฟล์ฟอนต์แบบ TTF คืออะไร ?
(What is a TTF Font File ?)

มาเริ่มต้นกันที่ฟอนต์แบบ TTF (ย่อมาจากคำว่า "TrueType Font") กันก่อนดีกว่า ... เนื่องจากมันเป็นรูปแบบที่เก่าแก่กว่าฟอนต์แบบ OTF (OpenType Font) ที่ถึงแม้ว่าก่อนหน้า ฟอนต์แบบ TTF จะมีฟอนต์แบบ PostScript มาก่อนหลายปี แต่เนื่องจากมันเป็นรูปแบบดึกดำบรรพ์ที่ไม่น่าจะมีใครใช้งานกันแล้ว เราจึงขอข้ามเรื่องราวของมันไปเลยละกัน

ฟอนต์แบบ TTF ถือกำเนิดขึ้นช่วงปลายของปี ค.ศ. 1980 (พ.ศ. 2523) จากความร่วมมือของบริษัท Apple และบริษัท Microsoft โดยมีวัตถุประสงค์ในการสร้างที่ชัดเจน คือเป็นมาตรฐานฟอนต์ที่สามารถใช้งานร่วมกับ ระบบปฏิบัติการ Windows และ ระบบปฏิบัติการ Macintosh (สมัยนั้นยังไม่เป็น macOS) ได้แบบ Native 

การปรับขนาดฟอนต์แบบ TTF สามารถปรับขนาดใหญ่แค่ไหนก็ได้ตามความต้องการโดยที่ไม่สูญเสียความละเอียด ภายในตัวฟอนต์ยังมีข้อมูลถูกบรรจุเอาไว้ด้วย โดยเป็นข้อมูลที่ช่วยให้ฟอนต์ดังกล่าวสามารถแสดงผลบนหน้าจอ หรือเครื่องพรินเตอร์สามารถพิมพ์ออกมาได้เหมือนกันแบบไม่มีผิดเพี้ยน

ไฟล์ฟอนต์แบบ OTF คืออะไร ?
(What is an OTF Font File ?)

OTF ย่อมาจากคำว่า "OpenType Font" มันเป็นรูปแบบฟอนต์ที่พัฒนาขึ้นมาจากความร่วมมือกันระหว่างบริษัท Adobe และ Microsoft โดยเริ่มพัฒนาขึ้นมาตั้งแต่ช่วงปี ค.ศ. 1996 (พ.ศ. 2539) และมีการพัฒนาอย่างต่อเนื่องอยู่หลายปี

ซึ่งในปี 2007 (พ.ศ. 2550) ได้เปลี่ยนชื่อเป็น OFF (Open Font Format) และต่อมาใน OFF รุ่นที่ 2 ที่เปิดตัวในปี ปี 2009 (พ.ศ. 2552) ทางองค์การระหว่างประเทศว่าด้วยการมาตรฐาน (International Organization for Standardization หรือ ISO)) ได้กำหนดให้มาตรฐานของฟอนต์แบบ OFF และ OpenType Font (OTF) มีคุณสมบัติในทางเทคนิคเทียบเท่ากัน ซึ่งได้ร่วมกันพัฒนาให้คงสถานะนี้ไว้มาจวบจนถึงปัจจุบัน บริษัทที่ผลิตฟอนต์ส่วนใหญ่ก็จะใช้ OTF เป็นมาตรฐานหลักในการพัฒนาฟอนต์

ฟอนต์แบบ OTF เป็นมาตรฐานที่พัฒนาโดยนำฟอนต์แบบ TTF มาปรับปรุงให้มีคุณสมบัติที่ดียิ่งขึ้นกว่าเดิม ยังคงข้อดีของ TTF อย่างความสามารถในการปรับขนาดของตัวฟอนต์ได้อย่างอิสระโดยไม่สูญเสียความละเอียด 

แต่คุณสมบัติที่ทำให้ฟอนต์แบบ OTF เหนือกว่าฟอนต์แบบ TTF คือจำนวนรูปแบบตัวอักษรที่สามารถบรรจุลงไปในฟอนต์ได้ ในการทำงานของฟอนต์นั้นจะมีสิ่งที่เรียกว่า "Glyph Tables" อยู่

Glyph Tables ของฟอนต์ Cordia New
Glyph Tables ของฟอนต์ Cordia New

โดยฟอนต์แบบ TTF นั้นจะใช้ Glyph Tables ในการกำหนดว่าหน้าตาของแต่ละตัวอักษรจะมีลักษณะเป็นอย่างไร ? แต่ฟอนต์แบบ OTF นั้นจะใช้ Glyph tables ควบคู่ไปกับ Compact Font Format Table (CCF) ซึ่งเส้นโค้งลูกบาศก์เบซิเยร์ (Cubic Bezier Spline) จะใช้ CCF มาช่วยให้ลด "จำนวนจุด" ที่ต้องใช้ในการแสดงผลฟอนต์ให้น้อยลงกว่าฟอนต์แบบ TTF ซึ่งใช้เพียงเส้นโค้งเบซิเยร์ (Bézier curve) เพียงอย่างเดียว ทำให้ขนาดของฟอนต์เล็กลงกว่าเดิมมาก (แต่สำหรับคอมพิวเตอร์ในยุคปัจจุบันนี้ก็เป็นความต่างเพียงเล็กน้อยที่ไม่ได้สำคัญมากนัก)

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?
ซ้าย Cubic Bezier splines / ขวา Bézier curve
ภาพจาก https://thep.blogspot.com/2007/12/cubic-vs-quadratic-splines.html

นอกจากนี้แล้ว ฟอนต์แบบ OTF ยังมีความจุสูง ทำให้นักออกแบบสามารถใส่อะไรหลาย ๆ อย่างเข้าไปในชุดฟอนต์ได้ เช่น Ligatures, ตัวใหญ่ขนาดเล็ก (Small Cap), อักขระสำรอง และตัวอักขระแบบโบราณ

Glphs

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?
ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?

Ligatures

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?

ตัวใหญ่ขนาดเล็ก (Small caps)

เป็นตัวพิมพ์ใหญ่ที่มีขนาดเล็กลง จะแตกต่างจากการปรับขนาดของฟอนต์นะ เพราะน้ำหนักของเส้นฟอนต์จะแตกต่างกันอย่างชัดเจน

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?
ภาพจาก https://logosbynick.com/best-small-caps-fonts/

อักขระสำรอง

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

ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?
ไฟล์ฟอนต์แบบ OTF, TTF และ WOFF แตกต่างกันอย่างไร ?
บนรูปแบบหลัก ล่างรูปแบบสำรอง

ข้อได้เปรียบของฟอนต์แบบ OTF

  • รองรับการทำงานแบบข้ามแพลตฟอร์มได้ดีกว่า
  • รองรับชุดอักขระสากล (International Character) ที่ระบุในมาตรฐาน Unicode ได้ดีกว่า TTF
  • ควบคุมการพิมพ์ของฟอนต์ได้อย่างละเอียด
  • ไฟล์มีขนาดเล็กกว่า
  • สามารถเพิ่มลายเซ็นต์ดิจิทัล (Digital Signature) ลงในชุดฟอนต์ เพื่อใช้รับรองความสมบูรณ์ของไฟล์ได้

ไฟล์ฟอนต์แบบ WOFF คืออะไร ?
(What is a WOFF Font File ?)

ฟอนต์แบบ  WOFF หรือ (Web Open Font Format) ได้ถูกพัฒนาขึ้นมาในปี ค.ศ. 2009 (พ.ศ. 2552) โดยทาง Mozilla ที่เรารู้จักกันดีในฐานะผู้พัฒนา เว็บเบราว์เซอร์ Firefox ได้ร่วมมือกับ Type Supply, LettError และอีกหลายองค์กรในการพัฒนามันขึ้นมา

โดยนำโครงสร้างของรูปแบบฟอนต์ TrueType, OpenType และ Open Font มาบีบอัดให้มีขนาดเล็กลงเพื่อให้การแสดงผลตัวอักษรบนอินเทอร์เน็ตทำได้เร็ว ขึ้น และมีการเพิ่ม Metadata กับ Private-use Data เข้าไปในโครงสร้าง เพื่อช่วยให้นักออกแบบฟอนต์ และผู้จัดจำหน่ายสามารถใส่ข้อมูลลิขสิทธิ์การใช้งานฟอนต์ลงไปได้ด้วย

ฟอนต์แบบ WOFF เป็นมาตรฐานแบบเปิดสำหรับการนำไปใช้งานบนเว็บไซต์ หรือผู้ที่สนใจในการออกแบบฟอนต์ก็สามารถใช้งานได้เช่นกัน ที่น่าสนใจ คือมันสามารถทำงานร่วมกับเทคโนโลยีอื่น ๆ เช่น HTML, CSS, SVG ฯลฯ ได้ด้วย หากคุณเป็นผู้พัฒนาเว็บไซต์ ด้วยการเพิ่มโค้ดเข้าไปใน CSS stylesheet เพื่อลิงก์ให้มันเชื่อมต่อกับฟอนต์ WOFF และกำหนดตำแหน่งที่จะใช้งานฟอนต์ดังกล่าว ตัวเว็บเบราว์เซอร์จะดาวน์โหลดฟอนต์ดังกล่าวมาใช้ และแสดงผลได้ทันที

ข้อได้เปรียบของฟอนต์แบบ WOFF

  1. ตัวฟอนต์ถูกบีบอัดให้มีขนาดเล็ก ทำให้ดาวน์โหลดได้อย่างรวดเร็ว และใช้แบนด์วิธน้อยกว่าฟอนต์ TTF และ OTF
  2. เพิ่มอิสระให้กับนักออกแบบเว็บไซต์ เพราะผู้ผลิตฟอนต์แบบ TTF และ OTF จะไม่อนุญาตให้ใช้งานฟอนต์ของพวกเขาบนเว็บไซต์ได้ หรือไม่ก็จำเป็นต้องเสียค่าใช้จ่ายเพิ่มเติม
  3. เป็นฟอนต์มาตรฐานสำหรับเว็บไซต์ และสามารถใช้งานได้ฟรีโดยไม่ติดลิขสิทธิ์

เลือกใช้งาน ไฟล์ฟอนต์ แบบไหนดี ?
(Which Font File Type is better ?)

รู้จักกับฟอนต์ทั้ง 3 รูปแบบกันไปแล้ว คำถามสุดท้ายที่หลายคนน่าจะสงสัยคือ เลือกใช้งานฟอนต์แบบไหนดี ?

ถ้ามองในแง่ของคุณสมบัติการทำงานแล้ว ฟอนต์แบบ OTF format (OpenType .oft) ที่เกิดจากการต่อยอดฟอนต์แบบ TTF TrueType Font (.ttf) มาย่อมดีกว่าอยู่แล้ว แต่สำหรับผู้ใช้งานทั่วไป จะ OTF, TTF หรือ WOFF ก็ตาม มันไม่ได้สลักสำคัญเลย หากคุณหาฟอนต์ที่เป็นเวอร์ชัน OTF ไม่ได้ จะใช้ TTF ผลลัพธ์ก็ไม่ได้แตกต่างกัน

ส่วนฟอนต์แบบ WOFF เป็นฟอนต์ที่ในตอนนี้ยังมีจำนวนฟอนต์ให้เลือกใช้งานน้อยกว่าฟอนต์แบบ OTF และ TTF การใช้งานจึงยังไม่แพร่หลายมากนัก อย่างไรก็ตาม หากมองในแง่ของความที่มันสามารถใช้งานได้ฟรี อนาคตมันน่าจะเติบโต และได้รับความนิยมมากขึ้นกว่าในตอนนี้นะ


ที่มา : www.makeuseof.com , www.techcybers.com , www.chilliprinting.com , en.wikipedia.org , 356labs.com

0 %E0%B9%84%E0%B8%9F%E0%B8%A5%E0%B9%8C%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B9%81%E0%B8%9A%E0%B8%9A+OTF%2C+TTF+%E0%B9%81%E0%B8%A5%E0%B8%B0+WOFF+%E0%B9%81%E0%B8%95%E0%B8%81%E0%B8%95%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3+%3F
แชร์หน้าเว็บนี้ :
Keyword คำสำคัญ »
เขียนโดย
ระดับผู้ใช้ : Admin    Thaiware
แอดมินสายเปื่อย ชอบลองอะไรใหม่ไปเรื่อยๆ รักแมว และเสียงเพลงเป็นพิเศษ
 
 
 

ทิปส์ไอทีที่เกี่ยวข้อง

 


 

แสดงความคิดเห็น

ความคิดเห็นที่ 1
18 ตุลาคม 2566 11:44:39 (IP 185.221.69.xxx)
GUEST
Comment Bubble Triangle
koravisut
ขอบคุณครับ มีประโยชน์มากๆ