ทำไมเราควรรวม ttf, eot, woff, svg, ... ในแบบอักษรหน้า

ในCSS3 font-faceมีหลายประเภทหลายแบบอักษรรวมเช่นttf, eot, woff, และsvgcff

ทำไมเราควรใช้ทุกประเภทเหล่านี้?

หากพวกเขาพิเศษสำหรับเบราว์เซอร์ที่แตกต่างกันทำไมจำนวนของพวกเขามากกว่าจำนวนของเบราว์เซอร์ที่สำคัญ?

คำตอบในปี 2562:

ใช้ WOFF2 เท่านั้นหรือถ้าคุณต้องการการสนับสนุนแบบดั้งเดิม WOFF ห้ามใช้รูปแบบอื่น

( svgและeotเป็นรูปแบบที่ตายแล้วttfและotfเป็นแบบอักษรระบบเต็มรูปแบบและไม่ควรใช้เพื่อจุดประสงค์บนเว็บ)

คำตอบเดิมจาก 2012:

สรุปแล้ว font-face นั้นเก่ามาก แต่เพิ่งได้รับการรองรับจาก IE มากกว่าเมื่อเร็ว ๆ นี้

• eot เป็นสิ่งจำเป็นสำหรับ Internet Explorers ที่เก่ากว่า IE9 - พวกเขาคิดค้นสเป็ค แต่ eot เป็นโซลูชันที่เป็นกรรมสิทธิ์

• ttfและotfเป็นแบบอักษรเก่าทั่วไปดังนั้นบางคนก็รู้สึกรำคาญว่านี่หมายความว่าทุกคนสามารถดาวน์โหลดแบบอักษรราคาแพงจากใบอนุญาตฟรี

• เวลาผ่านไป SVG 1.1 เพิ่มบท "แบบอักษร" ที่อธิบายถึงวิธีการสร้างแบบอักษรแบบดั้งเดิมโดยใช้มาร์กอัป SVG และผู้คนเริ่มใช้งานได้ เวลาผ่านไปนานกว่าและปรากฎว่ามันแย่มาก ๆเมื่อเทียบกับรูปแบบอักษรปกติและ SVG 2 จะลบบททั้งหมดอย่างชาญฉลาดอีกครั้ง

• จากนั้นwoffได้รับการคิดค้นโดยผู้ที่มีความรู้เกี่ยวกับโดเมนค่อนข้างน้อยซึ่งทำให้สามารถโฮสต์ฟอนต์ในลักษณะที่ทำให้บิตที่สำคัญยิ่งสำหรับการติดตั้งระบบกลายเป็นเรื่องสำคัญ แต่ไม่เกี่ยวข้องกับเว็บ (ทำให้ผู้คนกังวลเกี่ยวกับการละเมิดลิขสิทธิ์ อนุญาตให้การบีบอัดภายในให้เหมาะกับความต้องการของเว็บมากขึ้น (ทำให้ผู้ใช้และโฮสต์มีความสุข) นี่เป็นรูปแบบที่ต้องการ

• 2019 แก้ไขไม่กี่ปีต่อมาwoff2ได้รับร่างและยอมรับซึ่งช่วยเพิ่มการบีบอัดนำไปสู่ไฟล์ที่เล็กลงพร้อมกับความสามารถในการโหลดฟอนต์เดียว "ในส่วน" เพื่อให้สามารถเก็บแบบอักษรที่รองรับ 20 สคริปต์เป็น "chunks" "บนดิสก์แทนโดยที่เบราว์เซอร์สามารถโหลดแบบอักษร" ในส่วน "โดยอัตโนมัติได้ตามต้องการแทนที่จะต้องการถ่ายโอนแบบอักษรทั้งหมดขึ้นไปด้านหน้าปรับปรุงประสบการณ์การเรียงพิมพ์เพิ่มเติม

หากคุณไม่ต้องการรองรับ IE 8 หรือต่ำกว่าและ iOS 4 และต่ำกว่าและ android 4.3 ขึ้นไปคุณสามารถใช้ WOFF (และ WOFF2 ซึ่งเป็น WOFF ที่มีการบีบอัดสูงกว่าสำหรับเบราว์เซอร์ใหม่ล่าสุดที่รองรับ)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

การสนับสนุนสำหรับการwoffสามารถตรวจสอบได้ที่http://caniuse.com/woff
การสนับสนุนสำหรับการwoff2สามารถตรวจสอบได้ที่http://caniuse.com/woff2

Woff เป็นรูปแบบการบีบอัด (บีบอัด) ของแบบอักษร TrueType - OpenType มันมีขนาดเล็กและสามารถส่งผ่านเครือข่ายเช่นไฟล์กราฟิก สิ่งสำคัญที่สุดคือวิธีที่แบบอักษรนี้ถูกรักษาไว้อย่างสมบูรณ์รวมถึงการแสดงตารางกฎที่มีคนน้อยมากที่สนใจเพราะใช้สคริปต์ละตินเท่านั้น

ดู [ลบ URL ที่ตายแล้วออก] แบบอักษรที่คุณเห็นคือเว็บทดลองที่นำเสนอ smartfont (woff) ซึ่งมีอักขระผสมรวมกันหลายพันตัวทำให้มีรูปร่างที่ซับซ้อน ข้อความอ้างอิงเป็นรหัสละตินแบบง่าย ๆ ของ romanized Singhala (คัดลอกและวางเพื่อ Notepad และดู)

มีเพียง woff เท่านั้นที่สามารถทำได้เพราะไม่มีใครมีแบบอักษรนี้และยังสามารถเห็นได้ทุกที่ (Mac, Win, Linux และแม้แต่บนสมาร์ทโฟนโดยเบราว์เซอร์ทั้งหมดยกเว้นโดย IE IE ไม่ได้รับการสนับสนุนอย่างเต็มที่สำหรับ Open Types)

WOFF 2.0 ขึ้นอยู่กับอัลกอริทึมการบีบอัด Brotli และการปรับปรุงอื่น ๆ ผ่าน WOFF 1.0 ซึ่งให้การลดขนาดไฟล์มากกว่า 30% ได้รับการสนับสนุนใน Chrome, Opera และ Firefox

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/มีตัวอย่างเกี่ยวกับวิธีใช้งาน

โดยทั่วไปคุณเพิ่ม src url ไปยังไฟล์ woff2 และระบุรูปแบบ woff2 สิ่งสำคัญคือต้องมีสิ่งนี้ก่อนฟอร์แมต woff: เบราว์เซอร์จะใช้รูปแบบแรกที่รองรับ