แบบอักษรของเว็บคืออะไรและการแปลงเป็นแบบใดที่เกี่ยวข้อง

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

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

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

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

รูปแบบตัวอักษรที่พัฒนาโดยเฉพาะสำหรับเว็บเช่น Woff ได้รับการออกแบบโดยคำนึงถึงขนาดเล็ก ๆ แบบอักษรของ Google ให้บริการรูปแบบที่แตกต่างด้วยวิธีนี้เช่นกันมันเป็นเพียงเล็กน้อยที่ซ่อนอยู่

เป็นเรื่องสำคัญที่จะต้องทราบว่าแบบอักษรบางตัวอาจมีใบอนุญาตแบบอักษรบนเว็บแยกต่างหากซึ่งคุณอาจไม่มีแม้ว่าคุณจะเป็นเจ้าของไฟล์แบบอักษร เช่นเดียวกับ google images ... เพียงเพราะคุณสามารถดาวน์โหลดภาพได้ไม่ได้หมายความว่าคุณสามารถใช้มันเพื่อขายโลชั่นหลังโกนหนวดของ บริษัท คุณได้

Developers.google.comมีบทความที่ดีที่เน้นการเพิ่มประสิทธิภาพแบบอักษรบนเว็บ แต่มีบางอย่างเกี่ยวกับพื้นฐานเช่นกัน

มีข้อความที่ตัดตอนมาค่อนข้างดีเกี่ยวกับรูปแบบที่แตกต่างกันในบทความนั้น:

วันนี้มีรูปแบบตัวอักษรคอนเทนเนอร์สี่แบบที่ใช้บนเว็บ: EOT, TTF, WOFF และ WOFF2 น่าเสียดายที่แม้จะมีตัวเลือกที่หลากหลาย แต่ไม่มีรูปแบบสากลเดียวที่ใช้ได้กับเบราว์เซอร์เก่าและใหม่ทั้งหมด: EOT เป็น IE เท่านั้น TTF มีการสนับสนุน IE บางส่วน WOFF สนุกกับการรองรับที่กว้างที่สุด แต่ไม่มีในเบราว์เซอร์รุ่นเก่าบางรุ่น และการสนับสนุน WOFF 2.0 เป็นงานที่อยู่ระหว่างดำเนินการสำหรับเบราว์เซอร์จำนวนมาก

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

Transfonterยังมีตารางที่ดีเกี่ยวกับการสนับสนุนเบราว์เซอร์:

ฉันทำการค้นคว้าอย่างละเอียดมากขึ้นหลังจากถามคำถามนี้และฉันจึงเพิ่มคำตอบนี้เป็นภาคผนวกของ Joonas ซึ่งดี แต่ไม่ได้ตอบคำถามสุดท้ายโดยละเอียดสำหรับฉัน:

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

นักพัฒนาหลายคนยืนยันว่าWOFF และ WOFF2 เป็นรูปแบบตัวอักษรเฉพาะที่จำเป็นในการพัฒนาเว็บที่ทันสมัย คำตอบเหล่านั้นยังไม่ได้แหล่งที่มาที่ดีและฉันก็คิดว่าพวกเขากำลัง overzealous เล็กน้อยดังนั้นเรามาเริ่มต้นด้วยการดูตัวเลขการสนับสนุนจริงสำหรับ WOFF และ WOFF2 ความอนุเคราะห์จาก CanIUse.com ซึ่งเป็นมาตรฐานอุตสาหกรรมสำหรับการบันทึกเอกสารนี้ เรียงลำดับของสิ่ง

รองรับ WOFF2

WOFF2ปรับปรุงบน WOFF ในทุกวิถีทางรองรับโดยเบราว์เซอร์เดสก์ท็อปส่วนใหญ่ที่เปิดตัวหลังจากปี 2014 แต่มีเพียงตั้งแต่ปี 2018เริ่มได้รับการสนับสนุนโดยเบราว์เซอร์มือถือส่วนใหญ่ สนับสนุนโดยประมาณ 93% ของเบราว์เซอร์ทั่วโลก

รองรับ WOFF

WOFFเริ่มให้การสนับสนุนโดย Internet Explorer ใน IE9 (เปิดตัวในปี 2011) ซึ่งทำให้รูปแบบ EOT ล้าสมัยสำหรับรุ่นของ IE ที่เปิดตัวตั้งแต่ปี 2011 โดยรองรับประมาณ 97% ของเบราว์เซอร์ทั่วโลก

เบราว์เซอร์เดสก์ท็อปอื่น ๆ เริ่มให้การสนับสนุน WOFF ในเวลาเดียวกันรวมถึง Firefox ตั้งแต่ Firefox 3.6, Chrome ตั้งแต่ Chrome 5 และ Safari ตั้งแต่ 5.1 (เปิดตัวในปี 2010, 2011 และ 2011 ตามลำดับ) การแสดงรูปแบบTTF และ OTF ¹ล้าสมัยในรุ่นก่อน . เบราว์เซอร์มือถือส่วนใหญ่รองรับ WOFF ตั้งแต่ปี 2013

คำเตือนและข้อสรุป

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

ส่วนแบ่งรุ่นของเบราว์เซอร์อาจแตกต่างกันอย่างมากในกลุ่มประชากร: ปัจจัยเช่นประเทศระดับสังคมและรายได้ล้วนมีอิทธิพลอย่างมากต่ออุปกรณ์ใด (และดังนั้นเวอร์ชันของเบราว์เซอร์) ที่ผู้ใช้ของคุณใช้อยู่ ในฐานะนักพัฒนาคิดว่าเว็บไซต์ที่คุณสร้างจะถูกใช้โดยกลุ่มผู้เข้าชมที่มีแนวโน้มที่จะใช้รุ่นเก่ากว่านั้นหรือไม่

หากคุณตัดสินใจว่าเป็นกรณีนี้และคุณต้องสนับสนุนเบราว์เซอร์เดสก์ท็อปที่เก่ากว่า 2011 หรือเบราว์เซอร์มือถือที่เก่ากว่า 2013 ให้ใช้ฟอนต์สแต็กแบบเต็ม: WOFF2, WOFF, TTF (หรือ OTF) และ EOT

หากคุณไม่ต้องการสนับสนุนเบราว์เซอร์โบราณเหล่านั้นและยังคงเป็นความจริงที่คุณไม่ควรทำยิ่งกว่านั้นเพียงแค่ใช้ WOFF2 และ WOFF เป็นสแต็กแบบอักษรของคุณจากที่นี่

_{(1) TTF และ OTF เป็นรูปแบบอักษรบนเดสก์ท็อปดั้งเดิมและเบราว์เซอร์ใด ๆ ที่รองรับหนึ่งรองรับอีกรูปแบบหนึ่งดังนั้นอย่าใช้ทั้งสองอย่าง}

ไม่มาก.

WOFF ไม่มีอะไรนอกจากรูปแบบการบีบอัดสำหรับ TTF ทำให้มีขนาดเล็กลง internals ไม่เปลี่ยนแปลง WOFF2 เพิ่มขึ้นอีกเล็กน้อยมันปรับเปลี่ยนการแสดงแบบอักษรเล็กน้อยเพื่อคลายการบีบอัดอีกเล็กน้อย EOT ซึ่งเป็นรูปแบบ MS เท่านั้นไม่นับรวมเลย SVG นั้นมีรูปทรงจริง ๆ เท่านั้นแทบจะไม่มากนักดังนั้นมันจึงไม่นับเป็นแบบอักษรจริงใช้สำหรับไอคอนเท่านั้น

เพียงใช้ WOFF และทำมันให้เสร็จ หากคุณต้องการบีบไบต์สุดท้ายคุณอาจต้องการเสนอ WOFF2 ด้วยเช่นกัน แต่ความแตกต่างจะเล็กน้อย

ฉันต้องการเน้นบางสิ่งพื้นฐานจริง ๆ : "webfont" รายละเอียดการใช้งานด้านเทคนิคเป็นแบบอักษรที่คุณได้รับอนุญาตจากผู้สร้างหรือผู้ถือลิขสิทธิ์สำหรับงานเฉพาะในการใช้งานบนเว็บไซต์ และสิ่งเหล่านั้นจะอยู่ในรูปแบบ webfont หากคุณกำลังนั่งอยู่หน้าเครื่องกำเนิดไฟฟ้าเพื่อแปลงฟอนต์ให้เป็นฟอร์แมทของ webfont และไม่ใช่โอเพ่นซอร์สหรือที่คุณดึงตัวเองมาหยุดตรงนั้น! คุณเกือบจะทำลายใบอนุญาตและอาจถูกฟ้องร้องได้ และเนื่องจากอยู่บนเว็บจึงเป็นเรื่องง่ายสำหรับคนที่จะค้นหาสิ่งที่คุณทำและตรวจสอบกับรายการขายของพวกเขา

ดูเช่นDoofus นี้ผู้ทำงานให้กับ Facebook และ Google ซึ่งไม่ได้ตระหนักถึงใครบางคนจนกระทั่งเขาบอกว่าเขาใช้เทคนิคแบบอักษรละเมิดลิขสิทธิ์บนเว็บไซต์ของเขา เขามีใบอนุญาตการสมัครสมาชิกเดสก์ท็อป แต่นั่นไม่ใช่ใบอนุญาตสำหรับการใช้งานเว็บ