.woff เป็นไฟล์รูปแบบตัวอักษรเปิดเว็บ
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ส่วนขยายไฟล์ | .woff |
| รูปแบบไฟล์ | รูปแบบตัวอักษรเปิดเว็บ (WOFF) |
| วัตถุประสงค์ | ใช้เพื่อส่งแบบอักษรเว็บทันที |
| เบราว์เซอร์ที่รองรับ | เบราว์เซอร์ที่ทันสมัยที่สุดรวมถึง Chrome, Firefox, Edge, Safari และ Opera |
| การบีบอัด | ใช้การบีบอัด ZLIB เพื่อลดขนาดไฟล์ |
| ข้อมูลเมตา | สนับสนุนข้อมูลใบอนุญาตแบบอักษร |
| การสร้าง | สามารถสร้างได้โดยใช้ตัวแปลงแบบอักษรหรือตัวแก้ไขตัวอักษร |
| การเปิด | สามารถเปิดได้โดยใช้ตัวอักษรตัวอักษรหรือเว็บเบราว์เซอร์ |
มีอะไรอยู่ในหน้านี้
ไฟล์ .woff เป็นไฟล์ตัวอักษรในรูปแบบตัวอักษรเปิดเว็บ (WOFF) woff เป็นรูปแบบฟอนต์บีบอัดที่ใช้ในการส่งแบบอักษรเว็บ มันขึ้นอยู่กับรูปแบบ font truetype และ opentype แต่ใช้อัลกอริทึม zlib เพื่อบีบอัดข้อมูลตัวอักษรซึ่งทำให้ไฟล์เล็กลงและเร็วขึ้นในการดาวน์โหลด
ไฟล์ WOFF ได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยส่วนใหญ่รวมถึง Chrome, Firefox, Edge, Safari และ Opera พวกเขาสามารถใช้เพื่อเพิ่มแบบอักษรที่กำหนดเองในหน้าเว็บหรือเพื่อแทนที่แบบอักษรเริ่มต้นที่เบราว์เซอร์ใช้
ในการใช้ไฟล์ .woff บนหน้าเว็บคุณต้องเพิ่มรหัสต่อไปนี้ในไฟล์ CSS ของคุณ:
@font-face { font-family: "MyFont"; src: url("myfont.woff"); }สิ่งนี้จะบอกให้เบราว์เซอร์โหลดไฟล์ .woff และใช้สำหรับตระกูลตัวอักษรที่เรียกว่า "MyFont"
นอกจากนี้คุณยังสามารถติดตั้งไฟล์ .woff บนคอมพิวเตอร์ของคุณเพื่อให้สามารถใช้งานได้โดยแอปพลิเคชันเดสก์ท็อป ในการทำเช่นนี้คุณสามารถใช้ตัวอักษรตัวอักษรหรือตัวแก้ไขตัวอักษรเพื่อแยกข้อมูลตัวอักษรออกจากไฟล์ .woff จากนั้นติดตั้งในตำแหน่งที่เหมาะสม
นี่คือประโยชน์บางอย่างของการใช้ไฟล์ .woff:
ดังที่ได้กล่าวไว้ก่อนหน้านี้ไฟล์ woff มีข้อมูลตัวอักษรและข้อมูลเมตา เว็บเบราว์เซอร์ใช้ข้อมูลแบบอักษรเพื่อแสดงแบบอักษรที่กำหนดเองบนหน้าเว็บ ก่อนที่จะเปิดตัว WOFF นักออกแบบเว็บไซต์ต้องพึ่งพาตัวอักษรระบบหรือใช้รูปภาพเพื่อแสดงแบบอักษรที่กำหนดเอง วิธีการนี้ไม่เหมาะเพราะมันเพิ่มเวลาโหลดหน้าเว็บและทำให้เว็บไซต์สามารถเข้าถึงได้น้อยลงสำหรับผู้ใช้ที่พึ่งพาเทคโนโลยีช่วยเหลือเช่นตัวอ่านหน้าจอ
ด้วย Woff นักออกแบบเว็บไซต์สามารถใช้แบบอักษรที่กำหนดเองบนเว็บไซต์ของพวกเขาโดยไม่ต้องเสียสละประสิทธิภาพหรือการเข้าถึง นอกจากนี้ไฟล์ woff สามารถฝังอยู่ในไฟล์ CSS (Cascading Style Sheets) ได้อย่างง่ายดายทำให้ง่ายต่อการจัดการและจัดรูปแบบฟอนต์ในหน้าเว็บที่แตกต่างกัน
รูปแบบไฟล์ woff เปิดตัวครั้งแรกในปี 2009 โดย W3C เป็นมาตรฐานที่เสนอ มันถูกออกแบบมาเพื่อจัดการกับข้อ จำกัด ของรูปแบบไฟล์ฟอนต์อื่น ๆ เช่น truetype และ opentype เมื่อใช้บนเว็บ สเปค woff เวอร์ชันแรกได้รับการเผยแพร่ในปี 2010 และได้รับการสนับสนุนอย่างรวดเร็วจากเว็บเบราว์เซอร์ที่สำคัญรวมถึง Chrome, Firefox, Safari และ Opera
ตั้งแต่นั้นมาข้อมูลจำเพาะ woff ได้ผ่านการแก้ไขหลายครั้งโดยเวอร์ชันล่าสุดคือ woff 2.0 รุ่นนี้แนะนำอัลกอริทึมการบีบอัดที่ดีขึ้นทำให้ขนาดไฟล์เล็กลงและเวลาโหลดเร็วขึ้น
ดังนั้นอะไรทำให้ woff แตกต่างจากรูปแบบไฟล์ตัวอักษรอื่น ๆ ? ความแตกต่างหลักคือ woff เป็นรูปแบบไฟล์บีบอัดที่ออกแบบมาโดยเฉพาะสำหรับใช้บนเว็บ รูปแบบไฟล์ฟอนต์อื่น ๆ เช่น truetype และ opentype ไม่ได้ออกแบบมาโดยคำนึงถึงเว็บและอาจมีขนาดใหญ่เกินไปสำหรับการใช้เว็บที่มีประสิทธิภาพ
ความแตกต่างที่สำคัญอีกประการหนึ่งคือไฟล์ woff สามารถมีข้อมูลเมตาเช่นการออกใบอนุญาตแบบอักษรและข้อมูลลิขสิทธิ์ ข้อมูลเมตานี้เป็นสิ่งจำเป็นสำหรับการใช้งานเชิงพาณิชย์และช่วยปกป้องทรัพย์สินทางปัญญาของผู้สร้างแบบอักษร
มีข้อดีหลายประการในการใช้ไฟล์ woff บนเว็บไซต์ของคุณ ประการแรกไฟล์ woff มีขนาดเล็กกว่ารูปแบบไฟล์ตัวอักษรอื่น ๆ ซึ่งหมายความว่าโหลดเร็วขึ้นและปรับปรุงเวลาโหลดหน้าเว็บ นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับผู้ใช้มือถือที่อาจมีการเชื่อมต่ออินเทอร์เน็ตช้าลง
ประการที่สองไฟล์ woff เข้ากันได้กับเว็บเบราว์เซอร์ที่ทันสมัยที่สุดรวมถึง Chrome, Firefox, Safari และ Opera ซึ่งหมายความว่าคุณสามารถใช้แบบอักษรที่กำหนดเองบนเว็บไซต์ของคุณโดยไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้ในแพลตฟอร์มที่แตกต่างกัน
ในที่สุดไฟล์ woff สามารถฝังลงในไฟล์ CSS ได้อย่างง่ายดายทำให้ง่ายต่อการจัดการและจัดสไตล์แบบอักษรในหน้าเว็บที่แตกต่างกัน วิธีการนี้ยังช่วยลดจำนวนคำขอ HTTP ที่จำเป็นในการโหลดแบบอักษรและปรับปรุงเวลาโหลดหน้าเว็บเพิ่มเติม
การสร้างไฟล์ woff นั้นค่อนข้างง่ายและมีเครื่องมือหลายอย่างที่สามารถช่วยให้คุณทำเช่นนั้นได้ ขั้นตอนแรกคือการสร้างหรือรับไฟล์ตัวอักษรที่คุณต้องการแปลงเป็นรูปแบบ woff นี่อาจเป็นไฟล์แบบอักษร Truetype หรือ Opentype
ถัดไปคุณจะต้องใช้เครื่องมือแปลง woff เพื่อแปลงไฟล์ฟอนต์เป็นรูปแบบ woff มีเครื่องมือฟรีและชำระเงินหลายรายการออนไลน์เช่นตัวแปลง woff ของ Font Squirrel และ Transfonter
เมื่อคุณแปลงไฟล์ฟอนต์เป็นรูปแบบ woff แล้วคุณสามารถใช้มันบนเว็บไซต์ของคุณโดยฝังไว้ในไฟล์ CSS ของคุณโดยใช้กฎ @font-face
การใช้ไฟล์ woff บนเว็บไซต์ของคุณค่อนข้างตรงไปตรงมา คุณสามารถโฮสต์ไฟล์ woff บนเซิร์ฟเวอร์ของคุณหรือใช้เครือข่ายการส่งเนื้อหา (CDN) เพื่อส่งไฟล์ไปยังผู้ใช้ของคุณ แนะนำให้ใช้วิธีหลังเนื่องจากสามารถปรับปรุงเวลาโหลดหน้าเว็บและลดการโหลดบนเซิร์ฟเวอร์ของคุณ
ในการใช้ไฟล์ woff บนเว็บไซต์ของคุณคุณต้องฝังไว้ในไฟล์ CSS ของคุณโดยใช้กฎ @font-face กฎนี้ระบุชื่อตระกูลตัวอักษรแหล่งที่มาของตัวอักษรและรูปแบบตัวอักษร นี่คือตัวอย่าง:
@font-face { font-family: 'My Custom Font'; src: url('my-custom-font.woff') format('woff'); }@font-face { font-family: 'My Custom Font'; src: url('my-custom-font.woff') format('woff'); }
เมื่อคุณฝังไฟล์ woff ลงในไฟล์ CSS ของคุณแล้วคุณสามารถใช้ชื่อตระกูลตัวอักษรในกฎ CSS ของคุณเพื่อใช้ฟอนต์ที่กำหนดเองกับเว็บไซต์ของคุณ
ในขณะที่ไฟล์ woff นั้นใช้งานง่าย แต่ก็มีปัญหาทั่วไปที่คุณอาจพบ หนึ่งในปัญหาที่พบบ่อยที่สุดคือปัญหาความเข้ากันได้ในเว็บเบราว์เซอร์ที่แตกต่างกัน ในขณะที่เว็บเบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับไฟล์ woff บางเบราว์เซอร์รุ่นเก่าอาจไม่ ในกรณีเช่นนี้คุณอาจต้องใช้แบบอักษรทางเลือกหรือจัดทำรูปแบบตัวอักษรทางเลือกเช่น truetype หรือ opentype
อีกปัญหาที่คุณอาจพบคือการออกใบอนุญาตแบบอักษรและปัญหาลิขสิทธิ์ จำเป็นอย่างยิ่งที่จะต้องตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ที่จำเป็นในการใช้แบบอักษรบนเว็บไซต์ของคุณและคุณปฏิบัติตามข้อกำหนดของใบอนุญาตแบบอักษร
โดยสรุปไฟล์ woff เป็นรูปแบบไฟล์ฟอนต์บีบอัดที่ออกแบบมาโดยเฉพาะสำหรับใช้บนเว็บ มีข้อได้เปรียบหลายประการเหนือรูปแบบไฟล์ฟอนต์อื่น ๆ และช่วยให้นักออกแบบเว็บไซต์ใช้แบบอักษรที่กำหนดเองบนเว็บไซต์ของพวกเขาโดยไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้หรือการเสียสละประสิทธิภาพ
การสร้างไฟล์ woff นั้นค่อนข้างง่ายและมีเครื่องมือหลายอย่างที่สามารถช่วยให้คุณทำเช่นนั้นได้ เมื่อคุณสร้างไฟล์ woff แล้วคุณสามารถใช้มันบนเว็บไซต์ของคุณโดยฝังไว้ในไฟล์ CSS ของคุณโดยใช้กฎ @font-face
โดยรวมแล้วไฟล์ woff เป็นส่วนสำคัญของการออกแบบเว็บที่ทันสมัยและนักออกแบบเว็บไซต์ทุกคนควรคุ้นเคยกับประโยชน์ของพวกเขาและวิธีการใช้อย่างมีประสิทธิภาพ