แบบอักษรเวกเตอร์สีขนาดกะทัดรัดและเหมาะกับการบีบอัด รวมถึงรสการไล่ระดับสีที่คุณชื่นชอบ
ใน Chrome 98 ทีม Chrome และ Fonts ได้เพิ่มการรองรับ COLRv1 ซึ่งเป็นวิวัฒนาการของรูปแบบแบบอักษร COLRv0 ซึ่งมีจุดประสงค์เพื่อทำให้แบบอักษรสีมีความแพร่หลายโดยเพิ่มการไล่ระดับสี การรวมองค์ประกอบและการผสาน และปรับปรุงการนำรูปร่างภายในกลับมาใช้ใหม่สำหรับไฟล์แบบอักษรที่กระชับและกะทัดรัดซึ่งสามารถบีบอัดได้ดี
ลงสีเลย
ในเว็บ โดยทั่วไปข้อความจะใช้สีที่ระบุใน CSS แบบอักษรไม่ได้กำหนดสีใดไว้ แต่ระบุแค่ตำแหน่งที่ควรวางพิกเซล ซึ่งมักจะเป็นเรื่องดี CSS ช่วยให้ผู้เขียนเลือกสีได้อย่างยืดหยุ่น อย่างไรก็ตาม บางครั้งรูปอักขระอาจมีหลายสีซึ่งเมื่อรวมกันแล้วมีความหมาย เช่น ธง 
ที่มีแถบสีฟ้าอ่อน ชมพู และขาวนี้จะไม่สื่อความหมายเดียวกันหากวาดแค่ในสีข้อความปัจจุบัน
ทุกวันนี้ ผู้ใช้ส่วนใหญ่เห็นอีโมจิเป็นแบบอักษรสีเพียงแบบเดียว โดยทั่วไปอีโมจิจะปรากฏในเว็บผ่านแบบอักษรอีโมจิของระบบหรือด้วยการแทรกรูปภาพ (ซึ่งมีข้อมูลแทรกของตัวเอง 
) ไฟล์ขนาดใหญ่โดยเฉพาะแบบอักษรสีแบบบิตแมปทำให้ใช้แบบอักษรของเว็บสำหรับอีโมจิได้ยาก ด้วยการสนับสนุน COLRv1 เราหวังว่าจะได้เห็นการใช้แบบอักษรสีที่สร้างสรรค์มากขึ้น
บนเว็บและส่วนอื่นๆ
ขอดูสีของคุณหน่อย
เราได้สร้างตัวอย่าง 2 ตัวอย่างให้คุณลองเล่น ดังนี้
ตัวอย่างชิ้นงานจาก Google Fonts ที่ใช้ในตัวอย่างแสดงอยู่ใน Google Fonts Web API และจะไม่แสดงอยู่ในไดเรกทอรีที่ fonts.google.com เนื่องจากจะใช้ได้กับ Chrome เวอร์ชัน 98 ขึ้นไปเท่านั้นและจะแสดงผลงานทดลอง
คุณสามารถสร้างแบบอักษร COLRv1 ของคุณเองได้แล้วโดยใช้เครื่องมือฟรีและโอเพนซอร์ส โปรดดูคอมไพเลอร์แบบอักษร Nanoemoji ที่จะช่วยให้คุณสร้างแบบอักษร COLRv1 จากรูปภาพต้นฉบับ SVG ได้ จากนั้นก็ลองใช้ใน Chrome 98 ขึ้นไป ลองปรับแต่ง Bungee Spice ในแบบของคุณโดยการเปลี่ยนสีแบบไล่ระดับสีตามวิธีการเหล่านี้
ตัวอย่างเช่น คุณอาจแก้ไขแบบอักษร Bungee Spice ให้เป็นการไล่ระดับสีสีน้ำเงินและสีแดง
ทวีตผลลัพธ์ไปที่ @googlefonts 🙂 ลองใช้การไล่ระดับสีแบบวงกลมหรือแบบกวาด
ใหม่ที่ใช้ COLRv1
รูปแบบแบบอักษรรองรับการใช้สีหลายวิธี ซึ่งทั้งหมดก็มีข้อดีที่ต่างกันไปหมด แต่ยังไม่มีอันไหนที่ประสบความสำเร็จบนเว็บเลย (หากต้องการดูข้อมูลเพิ่มเติม เกี่ยวกับข้อดีข้อเสีย โปรดดูการพูดในการประชุม BlinkOn 15 ของ Dominik) Chrome 98 รองรับ COLRv1 ซึ่งเป็นวิวัฒนาการของ COLRv0 เราหวังว่าการผสานความสามารถด้านกราฟิกและไฟล์ที่กะทัดรัดของ COLRv1 จะเป็นตัวเลือกที่ดีสำหรับกรณีการใช้งานแบบอักษรสีจำนวนมาก COLRv1 เพิ่มการไล่ระดับสี การประกอบภาพ และการผสาน ตลอดจนปรับปรุงการใช้รูปร่างภายในซ้ำเพื่อให้ไฟล์มีขนาดกะทัดรัดยิ่งขึ้น
COLRv1 มีความสามารถในการแสดงออกซึ่งเทียบเท่ากับ SVG Native พร้อม การเบลนด์และการเรียบเรียงที่เพิ่มอยู่ที่ด้านบน การเติมสีมี 4 ประเภท ได้แก่ สีทึบ การไล่ระดับสีแบบเส้นตรง การไล่ระดับสีแบบรัศมี และการไล่ระดับสีแบบกวาด/โค้ง COLRv1 ช่วยให้คุณเปลี่ยนตำแหน่งและเปลี่ยนรูปแบบองค์ประกอบglyphโดยใช้ชุดการแปลงโฉม หมุน เปลี่ยนอัตราส่วน และปรับสเกลได้เต็มรูปแบบ นอกจากนี้ยังมีการรองรับแบบอักษรต่างๆ และนำรูปแบบการกำหนดรูปร่างที่มีอยู่ในแบบอักษรกลับมาใช้ซ้ำ
ลองนึกถึงอีโมจิลูกแก้ววิเศษเป็นตัวอย่าง เช่น ไฮไลต์รูปดาวมีรูปทรงเดียวกันแต่มีขนาดต่างกัน ซึ่งหมายความว่าคุณสามารถเปลี่ยนตำแหน่งและนำรูปใหม่ไปใช้ซ้ำได้โดยไม่ต้องทำซ้ำในไฟล์ รูปแบบนี้จะช่วยให้คุณนํารูปอักขระที่สมบูรณ์มาใช้ซ้ำภายในรูปอักขระใหม่ได้ โดยไม่ต้องเข้ารหัสรูปร่างเดียวกันซ้ำสําหรับรูปอักขระแต่ละรูป ลองจินตนาการถึงแบบอักษรสีที่ใช้ตกแต่ง ด้วยลวดลายดอกไม้ที่มีรูปดอกไม้เหมือนกันบนตัวอักษรต่างๆ โดยอ้างอิงรูปอักขระสีที่มีอยู่เท่านั้น สำหรับกรณีการใช้งานแบบอักษรของเว็บ COLRv1 จะบีบอัดได้ดีใน woff2 ตัวอย่างเช่น บิลด์ทดสอบของ Twemoji โดยใช้ COLRv1 จะกินพื้นที่ประมาณ 1.2 MB แต่มีขนาดประมาณ 0.6 MB ในรูปแบบ woff2 บิลด์ของชุด Noto Emoji Glyph แบบเต็มจะลดจาก 9 MB สำหรับเวอร์ชันบิตแมปเป็น 1.85 MB ในรูปแบบ COLRv1+woff2
กรณีการใช้งานแบบอักษรสี
พาดหัวที่ดึงดูด
แบบอักษรสีใหม่ๆ ช่วยให้ไฮไลต์ภาพ บรรทัดแรก และแบนเนอร์โดดเด่นสะดุดตา
ไม่มีการแทนที่รูปภาพแล้ว: แบบอักษรอีโมจิ
หากคุณรองรับเนื้อหาที่ผู้ใช้สร้างขึ้น ผู้ใช้ของคุณอาจใช้อีโมจิ ปัจจุบันการสแกนข้อความและแทนที่อีโมจิที่พบกับรูปภาพนั้นถือเป็นเรื่องปกติ เพื่อให้การแสดงผลข้ามแพลตฟอร์มที่สอดคล้องกันและรองรับอีโมจิใหม่ๆ กว่าที่ระบบปฏิบัติการรองรับ รูปภาพเหล่านั้นจะเปลี่ยนกลับไปเป็นข้อความระหว่างการทำงานของคลิปบอร์ด ต่อไปนี้คือตัวอย่างจริง
หากคุณใช้แบบอักษรอีโมจิ คุณก็เพียงแค่แสดงผลข้อความในแบบอักษรดังนี้
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
ในทำนองเดียวกัน COLRv1 ในคอมโพเนนต์รีแอ็กชันด้วยอีโมจิให้โอกาสในการใช้ไฟล์แบบอักษรขนาดกะทัดรัดแทนแคตตาล็อกชิ้นงานรูปภาพ
ลองนึกดูว่าคุณต้องดึงรูปภาพกี่รูปเพื่อให้เครื่องมือเลือกอีโมจิสมบูรณ์ได้
สีในแบบอักษรไอคอน
การใช้สีในแบบอักษรไอคอนจะเพิ่มความชัดเจนและทำให้อักษรอ่านเข้าใจง่ายขึ้น
การแสดงออกทางศิลปะ
แบบอักษรสีที่มีประสิทธิภาพในการใช้พื้นที่ช่วยให้การแสดงออกด้านศิลปะในรูปแบบใหม่ๆ ในข้อความบนเว็บ ตัวอย่างของแบบอักษรอาหรับสไตล์ Kufi นี้ใช้การไล่ระดับสีในการตีความทางศิลปะว่าลวดลายการคัดลายมือแบบดั้งเดิมจะเป็นอย่างไรเมื่อใช้กับรูปแบบการเขียนภาษาอาหรับสไตล์ Kufi ซึ่งมีต้นกำเนิดมาจากการเขียนด้วยปลายงและหมึก แต่แกะสลักจากหิน
การตรวจหาฟีเจอร์
ขณะนี้ พิจารณาว่าเครื่องมือของเบราว์เซอร์รองรับรูปแบบแบบอักษรสีหนึ่งๆ หรือไม่ โดยดูจาก User Agent ด้วยการค้นหา User Agent หรือค้นหาในไลบรารี เช่น ChromaCheck โดย @PixelAmbacht เพื่อทดสอบการแสดงผลรูปอักขระสีใน Canvas โซลูชันทั้ง 2 โซลูชันไม่มีประสิทธิภาพที่ดีที่สุด การทดสอบฟีเจอร์ควรตรวจหาเฉพาะฟีเจอร์ที่เจาะจงและหลีกเลี่ยงการดักจับ User Agent ไลบรารี ChromaCheck ไม่จำเป็นต้องดำเนินการเกี่ยวกับ Canvas แบบ 2 มิติที่ใช้ทรัพยากรมากเพื่อกำหนดการสนับสนุน
ทีม Chrome ต้องการปรับปรุงให้ดีขึ้นและได้เริ่มซีรีส์การสนทนา [1, 2] ในคณะทำงานของ CSS เพื่อให้ข้อมูลเกี่ยวกับการรองรับเทคโนโลยีแบบอักษรของเบราว์เซอร์ใน JavaScript และประกาศใน CSS ทีมนี้มีแผนที่จะเปิดตัวการตรวจหาฟีเจอร์ที่มีประสิทธิภาพสำหรับแบบอักษรสีและเทคโนโลยีแบบอักษรอื่นๆ ใน Chrome เวอร์ชันในอนาคต
หากต้องการใช้แบบอักษรสีในโปรเจ็กต์เมื่อการสนับสนุน COLRv1 มีให้บริการสำหรับ Chrome เท่านั้น คุณมี 2 วิธีที่ทำได้ ได้แก่ ขอแบบอักษร COLRv1 ที่มีตัวอักษรโมโนโครมด้วย User Agent ที่ไม่รองรับ COLRv1 จะถอยกลับไปแสดงรูปอักขระแบบโมโนโครม อีกทางเลือกหนึ่งคือ คุณสามารถใช้ไลบรารี ChromaCheck หรือการตรวจหา User Agent เพื่อดูว่ามีการรองรับ COLRv1 หรือไม่ จากนั้นส่ง CSS ที่โหลดแบบอักษร COLRv1 ใน User Agent ที่รองรับและใช้รูปแบบแบบอักษรอื่น เช่น COLRv0, รูปแบบแบบอักษรบิตแมปหรือ OpenType SVG ในเบราว์เซอร์อื่นๆ
การรองรับชุดสีแบบอักษร CSS
ซึ่งจะมีประโยชน์อย่างยิ่งหากการใช้ชุดสีอื่นไม่จำเป็นต้องใช้แบบอักษรใหม่ โชคดีที่มีกลไกอยู่ ซึ่งก็คือ พร็อพเพอร์ตี้ CSS ของ font-palette ทีม Chrome กำลังดำเนินการเพิ่มการรองรับชุดสีแบบอักษรใน Chrome
แบบอักษร COLRv1 และคุณ
หากแบบอักษร COLRv1 กระตุ้นความสนใจของคุณ ให้ถามผู้ให้บริการแบบอักษรเกี่ยวกับแบบอักษรสี COLRv1 ที่จะใช้ในโปรเจ็กต์ ลองใช้ตัวอย่างและการสาธิตด้านบน หรือจะลองศึกษาและทดลองสร้างแบบอักษรของคุณเองดูก็ได้
หากคุณมีความคิดเห็นเกี่ยวกับ COLRv1 ใน Chrome โปรดโพสต์ไปยังรายชื่ออีเมลของ Blink-dev หรือแจ้งปัญหาในเครื่องมือติดตามปัญหา หากคุณมีความคิดเห็นเกี่ยวกับรูปแบบแบบอักษร COLRv1 ให้แจ้งปัญหาในที่เก็บเฉพาะของ GitHub สำหรับ COLRv1
เราตื่นเต้นที่จะได้เห็นว่า COLRv1 นำความคิดสร้างสรรค์ด้านการพิมพ์รูปแบบใหม่มาสู่เว็บได้อย่างไร
ดูข้อมูลเพิ่มเติม
หากสนใจรายละเอียดเพิ่มเติม เรามีแหล่งข้อมูลเพิ่มเติมให้คุณดังนี้
หากต้องการเรียนรู้วิธีการทำงานของ COLRv1 และการใช้งานใน Chrome โปรดดูการพูดในการประชุม BlinkOn 15 ของ Dominik
- International Unicode Constable #45: Vector Color Fonts, Talk โดย Roderick Sheeter, Peter Constable และ Dominik Röttsches (วิดีโอ รายละเอียดการพูดคุย)
- คอมไพเลอร์แบบอักษร Nanoemoji สร้าง แบบอักษร COLRv1 จากรูปภาพ SVG
- Google Fonts ที่เก็บสี GitHub มีเวอร์ชันปัจจุบันของอีโมจิ Noto, Twemoji และแบบอักษรตัวอย่างอื่นๆ
- ภาพแบบอักษร Bradley Initials ของ DJR กำลังสำรวจ COLRv1
- เครื่องมือ ChromaCheck และไลบรารีเพื่อ ตรวจหาเทคโนโลยีแบบอักษรสีที่มีอยู่ทั้งหมด
ข้อความแสดงการยอมรับ
ขอขอบคุณ Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens และ