แปลง TTF เป็น WOFF2
การโฮสต์ฟอนต์บนเว็บไซต์ของคุณเองเริ่มต้นที่นี่ เบราว์เซอร์ปัจจุบันทุกตัวเลือกดาวน์โหลด WOFF2 ก่อนฟอร์แมตอื่น และ WOFF2 ยังเป็นรูปแบบที่เล็กที่สุดสำหรับห่อข้อมูล TrueType ที่คุณมีอยู่แล้ว หน้านี้ยังสร้างกฎ CSS สำหรับโหลดฟอนต์ให้ด้วย
แปลงไฟล์ฟอนต์
หรือลากไฟล์ TTF, OTF, WOFF … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
การลบชุดอักษรที่ไม่ได้ใช้สามารถลดเว็บฟอนต์จากหลายร้อย KB ให้เหลือต่ำกว่า 30 KB สำหรับฟอนต์ที่ติดตั้งบนคอมพิวเตอร์ควรเก็บอักขระไว้ทั้งหมด
วางข้อความหรืออักขระที่ฟอนต์ต้องรองรับ เช่น คำในโลโก้หรือพาดหัว ส่วนที่เหลือทั้งหมดจะถูกลบออก
ฮินต์ช่วยให้ข้อความขนาดเล็กคมชัดบนหน้าจอ Windows การลบฮินต์มักช่วยลดขนาดเว็บฟอนต์ได้ 10–30% ส่วนฮินต์อัตโนมัติจะเพิ่มฮินต์ให้ฟอนต์ที่ไม่มี
เว้นว่างไว้เพื่อคงชื่อเดิม การเปลี่ยนชื่อช่วยให้ติดตั้งฟอนต์ที่แปลงแล้วคู่กับฟอนต์ต้นฉบับได้โดยไม่ขัดแย้งกัน
เช่น Regular, Bold, Italic เว้นว่างไว้เพื่อคงชื่อสไตล์เดิม
วิธีใช้เครื่องมือนี้
- 1
อัปโหลดไฟล์ TTF
เพิ่มทุกน้ำหนักและสไตล์ที่ตั้งใจจะใช้ ได้สูงสุด 20 ไฟล์ ไฟล์ละไม่เกิน 95 MB ไฟล์ TTF แบบ Variable ก็ใช้ได้และยังคงแกนปรับค่าไว้
- 2
เปิด CSS ไว้ และตัด subset หากทำได้
ตัวเลือก รวม CSS @font-face ถูกติ๊กไว้แล้ว ในส่วน การตั้งค่าขั้นสูง ให้ตั้ง อักขระที่เก็บไว้ เป็น Basic Latin หรือ Latin + accents หากเว็บไซต์ของคุณใช้ภาษาตะวันตก และอาจตั้ง ฮินติ้ง เป็นลบออกด้วย
- 3
แปลงเป็น WOFF2
กด แปลงเป็น WOFF2 แล้วดาวน์โหลดฟอนต์พร้อมไฟล์ .css อัปโหลดทั้งสองไฟล์ไปยังเว็บไซต์ จากนั้นลิงก์สไตล์ชีตหรือวางกฎลงใน CSS ของคุณเอง
แปลง TTF เป็น WOFF2 สำหรับเว็บไซต์ได้อย่างไร
อัปโหลดไฟล์ .ttf ติ๊ก รวม CSS @font-face ไว้ แล้วกด แปลงเป็น WOFF2 คุณจะได้ไฟล์ .woff2 พร้อมไฟล์ .css ที่มีกฎ @font-face ชี้ไปยังไฟล์นั้น
ทำไมควรใช้ WOFF2 เป็นฟอร์แมตเว็บฟอนต์
TTF เป็นข้อมูลตารางที่ไม่ถูกบีบอัด ได้แก่ เส้นโครงร่าง ค่าวัดขนาด kerning และชื่อ WOFF2 ซึ่งประกาศเป็น W3C Recommendation ในปี 2018 เก็บตารางเหล่านั้นไว้ครบ แต่ผ่านการบีบอัดด้วย Brotli อัลกอริทึมที่ Google เปิดตัวในปี 2015 หลังจัดเรียงเส้นโครงร่างของกลิฟใหม่ให้บีบอัดได้ดีขึ้น จากการทดสอบของ Google เอง WOFF2 เล็กกว่าฟอร์แมต WOFF รุ่นเก่าโดยเฉลี่ยราว 30% และเบราว์เซอร์จะคืนข้อมูลฟอนต์เดิมหลังดาวน์โหลด รูปทรงตัวอักษรจึงไม่เปลี่ยนแปลง
ฟอนต์ขัดขวางการเรนเดอร์ ขนาดจึงสำคัญกว่าที่ตัวเลขกิโลไบต์บอก ก่อนที่เว็บฟอนต์จะมาถึง เบราว์เซอร์จะซ่อนข้อความหรือแสดงฟอนต์สำรอง และการสลับที่ช้าอาจทำให้เลย์เอาต์ขยับ ไฟล์ที่เล็กลงช่วยลดช่วงเวลานี้ และมีสองตัวเลือกที่ลดได้อีก คือ อักขระที่เก็บไว้ ซึ่งลบกลิฟที่หน้าเว็บไม่เคยแสดง และ ฮินติ้ง ที่ตั้งเป็นลบออก ซึ่งตัดคำสั่งที่โทรศัพท์และจอความละเอียดสูงไม่ใช้อยู่แล้ว ควรเก็บไฟล์ TTF ต้นฉบับไว้ใช้บนเดสก์ท็อป WOFF2 to TTF แกะเว็บฟอนต์กลับได้ภายหลัง แต่กู้กลิฟที่ซับเซ็ตตัดออกไปแล้วไม่ได้
เปรียบเทียบขนาดไฟล์ TTF กับ WOFF2
TTF ชุดอักขระครบ
100%
ตารางฟอนต์ที่ไม่บีบอัด เหมือนที่ติดตั้งบนเดสก์ท็อป
WOFF2 ซับเซ็ต Basic Latin
มักเหลือ 10–25%
บีบอัดด้วย Brotli และมีกลิฟน้อยลง ผลต่างกันไปตามฟอนต์
กฎ @font-face สำหรับฟอนต์ WOFF2
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}การรองรับ WOFF2 ของเบราว์เซอร์แต่ละเวอร์ชัน
2014
Chrome 36
เบราว์เซอร์ของ Google เป็นรายแรกที่ถอดรหัส WOFF2 โดยค่าเริ่มต้น
2015
Firefox 39
Mozilla เปิดใช้การถอดรหัส WOFF2 โดยค่าเริ่มต้น
2016
Edge 14
Edge รุ่นแรกของ Microsoft รองรับ WOFF2 พร้อมอัปเดต Windows 10 Anniversary Update
2018
W3C Recommendation
ข้อกำหนดเป็นอันสิ้นสุด ซึ่งขณะนั้น Safari บน macOS และ iOS ก็ถอดรหัส WOFF2 ได้แล้ว
TTF
ฟอนต์ TrueType
TTF เป็นรูปแบบฟอนต์ TrueType ที่ Apple พัฒนาขึ้นในช่วงปลายทศวรรษ 1980 และเปิดตัวในปี 1991 จากนั้นจึงให้สิทธิ์แก่ Microsoft นิยามโครงร่างของตัวอักษรด้วยเส้นโค้งกำลังสอง (quadratic) และมีคำสั่ง hinting ที่ช่วยให้ข้อความดูคมชัดบนหน้าจอ TrueType ได้รับการรองรับในทุกระบบปฏิบัติการเดสก์ท็อป โปรแกรมประมวลผลคำ และแอปออกแบบ แต่ขาดฟีเจอร์ตัวอักษรขั้นสูงบางอย่างของ OpenType และมีขนาดใหญ่กว่ารูปแบบเว็บฟอนต์
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- –
- ภาพเคลื่อนไหว
- –
- เปิดตัว
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 เป็นเวอร์ชันที่สองของ Web Open Font Format ซึ่งใช้การบีบอัด Brotli ของ Google และเผยแพร่เป็น W3C Recommendation ในปี 2018 ไฟล์เล็กกว่า WOFF ประมาณ 30% ช่วยให้หน้าเว็บโหลดเร็วขึ้น เบราว์เซอร์สมัยใหม่ทุกตัวรองรับ WOFF2 และเป็นรูปแบบที่แนะนำสำหรับเว็บฟอนต์ ระบบปฏิบัติการเดสก์ท็อปและแอปออกแบบติดตั้งไฟล์นี้โดยตรงไม่ได้
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- –
- ภาพเคลื่อนไหว
- –
- เปิดตัว
- 2018 · W3C (Google)
TTF to WOFF2 บรรจุฟอนต์เดสก์ท็อปลงในคอนเทนเนอร์ที่บีบอัดด้วย Brotli ซึ่งเบราว์เซอร์นิยมใช้ ทำให้กลิฟชุดเดิมถึงผู้เข้าชมด้วยจำนวนไบต์ที่น้อยลง ส่วนหน้าย้อนกลับมีไว้สำหรับผู้ที่ต้องติดตั้งฟอนต์ที่พบบนเว็บ
คำถามที่พบบ่อยเรื่องการแปลง TTF เป็น WOFF2
ยังต้องมีฟอนต์ TTF หรือ WOFF สำรองคู่กับ WOFF2 อยู่หรือไม่
สำหรับเว็บไซต์สาธารณะในปัจจุบัน โดยทั่วไปไม่จำเป็น Chrome, Edge, Firefox และ Safari รองรับ WOFF2 มานานหลายปีแล้ว ส่วนเบราว์เซอร์ที่ไม่รองรับ เช่น Internet Explorer 11 แทบไม่คุ้มกับการเพิ่มไฟล์ หากข้อมูลวิเคราะห์ของคุณพบผู้เข้าชมกลุ่มนี้ ให้เพิ่มไฟล์จาก TTF to WOFF เป็นรายการ src ที่สอง
ทำไมฟอนต์ WOFF2 ยังมีขนาดไฟล์เกิน 100 KB
การบีบอัดลดเฉพาะวิธีเก็บกลิฟ ไม่ได้ลดจำนวนกลิฟ ฟอนต์ที่ครอบคลุมละติน ซีริลลิก กรีก และเวียดนามจะมีกลิฟของทุกชุดอักษรอยู่ครบ การทำซับเซ็ตเฉพาะอักษรที่แสดงจริงคือสิ่งที่ลดฟอนต์ข้อความให้เหลือหลักสิบกิโลไบต์
font-display: swap ทำหน้าที่อะไร
ค่านี้สั่งให้เบราว์เซอร์แสดงข้อความด้วยฟอนต์สำรองทันที แล้วสลับเป็นเว็บฟอนต์เมื่อโหลดเสร็จ แทนที่จะซ่อนข้อความระหว่างดาวน์โหลด เพิ่มลงในกฎ @font-face ตามตัวอย่างด้านบน หรือใช้ optional หากไม่ต้องการให้สลับฟอนต์ช้าบนการเชื่อมต่อที่ช้า
แปลงไฟล์ TTF จาก Google Fonts เป็น WOFF2 แล้วโฮสต์เองได้หรือไม่
ได้ ฟอนต์ใน Google Fonts เผยแพร่ภายใต้ SIL Open Font License หรือ Apache License ซึ่งอนุญาตให้แปลงและโฮสต์เองได้ การโฮสต์ไฟล์เองยังช่วยลดการร้องขอไปยังเซิร์ฟเวอร์ของบุคคลที่สามด้วย
WOFF2 ใช้กับจดหมายข่าวทางอีเมลได้หรือไม่
ได้เฉพาะบางแอปอีเมล Apple Mail และ iOS Mail โหลดเว็บฟอนต์ผ่าน @font-face ส่วน Gmail และ Outlook ส่วนใหญ่ไม่สนใจและแสดงฟอนต์สำรอง ควรระบุฟอนต์ระบบที่ปลอดภัยไว้ในลำดับฟอนต์ของอีเมลเสมอ