แบบอักษรเวกเตอร์สีที่กะทัดรัดและบีบอัดได้ พร้อมเฉดสีไล่ระดับที่คุณชื่นชอบ
ใน Chrome 98 ทีม Chrome และทีมแบบอักษรได้เพิ่มการรองรับ COLRv1 ซึ่งเป็นรูปแบบแบบอักษรที่พัฒนามาจาก COLRv0 โดยมีจุดประสงค์เพื่อทำให้แบบอักษรสีแพร่หลายขึ้นด้วยการเพิ่มการไล่ระดับสี การวางซ้อน และการผสมผสาน รวมถึงปรับปรุงการนํารูปร่างภายในมาใช้ซ้ำเพื่อไฟล์แบบอักษรที่คมชัดและกะทัดรัดซึ่งบีบอัดได้ดี
ระบายสีเลย
โดยทั่วไปแล้ว ข้อความบนเว็บจะวาดด้วยสีที่ระบุไว้ใน CSS แบบอักษรไม่ได้กำหนดสีใดๆ เพียงแต่ระบุตำแหน่งที่ควรวางพิกเซล ซึ่งเป็นเรื่องที่ดี CSS ช่วยให้ผู้แต่งเลือกสีได้อย่างยืดหยุ่น อย่างไรก็ตาม บางครั้งสัญลักษณ์อาจมีหลายสีที่รวมกันเป็นความหมาย ตัวอย่างเช่น ธง 
ลายทางสีฟ้าอ่อน สีชมพู และสีขาวนี้จะไม่สื่อความหมายเดียวกันหากวาดด้วยสีข้อความปัจจุบัน
ปัจจุบันอีโมจิเป็นฟอนต์สีเพียงแบบเดียวที่ผู้ใช้ส่วนใหญ่เห็น โดยทั่วไปแล้ว อีโมจิจะปรากฏบนเว็บผ่านแบบอักษรอีโมจิของระบบ หรือโดยการแทรกรูปภาพ (ซึ่งมีความซับซ้อนในตัวเอง 
) ไฟล์ขนาดใหญ่ โดยเฉพาะแบบอักษรสีแบบบิตแมป ทำให้การใช้แบบอักษรเว็บสำหรับอีโมจิเป็นเรื่องยาก เราหวังว่าการรองรับ COLRv1 จะช่วยให้การใช้แบบอักษรสีที่สร้างสรรค์บนเว็บและแพลตฟอร์มอื่นๆ แพร่หลายมากขึ้น
แสดงสีของคุณ
เราได้สร้างตัวอย่าง 2 รายการให้คุณลองใช้ดังนี้
ชิ้นงานตัวอย่างจาก Google Fonts ที่ใช้ในตัวอย่างนี้แสดงอยู่ใน Web API ของ Google Fonts โดยรหัสเหล่านี้ไม่ได้แสดงอยู่ในไดเรกทอรีที่ fonts.google.com เนื่องจากจะใช้ได้กับ Chrome 98 ขึ้นไปเท่านั้น และจะแสดงงานทดลอง
ตอนนี้คุณสร้างแบบอักษร COLRv1 ของคุณเองได้แล้วโดยใช้เครื่องมือโอเพนซอร์สและแบบไม่เสียค่าใช้จ่าย ลองใช้คอมไพเลอร์แบบอักษร nanoemoji ซึ่งช่วยให้คุณสร้างแบบอักษร COLRv1 จากรูปภาพต้นฉบับ SVG ได้ จากนั้นลองใช้แบบอักษรดังกล่าวใน Chrome 98 ขึ้นไป ลองปรับแต่ง Bungee Spice ในแบบของคุณเองด้วยการเปลี่ยนสีแบบไล่ระดับสีโดยใช้วิธีการเหล่านี้
เช่น คุณอาจแก้ไขแบบอักษร Bungee Spice ให้เป็นแบบไล่ระดับสีฟ้าและแดง ดังนี้
ทวีตผลลัพธ์ไปที่ @googlefonts 🙂 ลองการไล่ระดับสีแบบวงกลมหรือแบบกวาดดูสิ
ฟีเจอร์ใหม่ของ COLRv1
รูปแบบแบบอักษรรองรับการใช้สีได้หลายวิธี ซึ่งแต่ละวิธีมีข้อดีข้อเสียแตกต่างกันไป แต่ยังไม่มีวิธีใดที่ใช้ได้สำเร็จบนเว็บ (หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการแลกเปลี่ยน โปรดดูการบรรยายของ Dominik ในการประชุม BlinkOn 15) Chrome 98 รองรับ COLRv1 ซึ่งเป็นการพัฒนาจาก COLRv0 เราหวังว่าการรวมความสามารถด้านกราฟิกกับไฟล์ขนาดกะทัดรัดของ COLRv1 จะทำให้เป็นตัวเลือกที่ดีสำหรับกรณีการใช้งานแบบอักษรสีจำนวนมาก COLRv1 เพิ่มการไล่ระดับสี การคอมโพสิต และการผสม และปรับปรุงการนํารูปร่างภายในมาใช้ซ้ำเพื่อให้ไฟล์มีขนาดกะทัดรัดยิ่งขึ้น
COLRv1 มีความสามารถในการแสดงออกอย่างชัดเจนซึ่งใกล้เคียงกับ SVG Native รวมถึงการเพิ่มการรวมและการประกอบข้อความไว้ด้านบน การเติมสีมี 4 ประเภท ได้แก่ สีพื้น การไล่ระดับสีแบบเส้นตรง การไล่ระดับสีแบบรัศมี และการไล่ระดับสีแบบเกลียว/กรวย COLRv1 ช่วยให้คุณจัดตำแหน่งและเปลี่ยนรูปแบบองค์ประกอบสัญลักษณ์ได้โดยใช้การเปลี่ยนรูปแบบการแปล การหมุน การบิด และการปรับขนาดที่สมบูรณ์ นอกจากนี้ ยังรองรับรูปแบบแบบอักษรที่หลากหลายและนำรูปแบบการกําหนดรูปร่างที่มีอยู่มาใช้ซ้ำในแบบอักษร
ลองดูตัวอย่างอีโมจิลูกแก้วคริสตัล ข้อความไฮไลต์รูปดาวมีรูปร่างเหมือนกันแต่มีขนาดต่างกัน ซึ่งหมายความว่าคุณจัดตำแหน่งและนำรูปทรงหนึ่งไปใช้งานซ้ำได้โดยไม่ต้องทำซ้ำภายในไฟล์ รูปแบบนี้ช่วยให้คุณใช้รูปอักขระแบบเต็มภายในรูปอักขระใหม่ โดยไม่ต้องเข้ารหัสรูปร่างเดียวกันซ้ำหลายครั้งสำหรับแต่ละรูป ลองนึกถึงแบบอักษรสีสำหรับตกแต่งที่มีการตกแต่งด้วยดอกไม้ โดยวางรูปทรงดอกไม้เดียวกันในตัวอักษรต่างๆ เพียงแค่อ้างอิงสัญลักษณ์สีที่มีอยู่ สำหรับกรณีการใช้งานแบบอักษรบนเว็บ COLRv1 จะบีบอัดได้ดีภายใต้ woff2 ตัวอย่างเช่น บิลด์ทดสอบของ Twemoji ที่ใช้ COLRv1 จะมีขนาดประมาณ 1.2 MB เมื่อขยายขนาด แต่มีขนาดประมาณ 0.6 MB ในรูปแบบ woff2 บิลด์ชุดอักขระ Noto Emoji ทั้งหมดมีขนาดลดลงจาก 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 ให้คุณใช้ไฟล์แบบอักษรที่กะทัดรัดแทนแคตตาล็อกชิ้นงานรูปภาพได้
ลองนึกดูว่าคุณจะต้องดึงข้อมูลรูปภาพจำนวนเท่าใดเพื่อให้เครื่องมือเลือกอีโมจิสมบูรณ์
สีในแบบอักษรไอคอน
การใช้สีในแบบอักษรไอคอนจะช่วยเพิ่มความชัดเจนและทำให้เข้าใจสัญลักษณ์ได้ง่ายขึ้น
การแสดงออกด้านศิลปะ
แบบอักษรสีที่ประหยัดพื้นที่ช่วยให้คุณแสดงออกอย่างมีศิลปะในรูปแบบใหม่ๆ ในข้อความบนเว็บ ตัวอย่างแบบอักษรภาษาอาหรับสไตล์คูฟีนี้ใช้การไล่สีเป็นการแสดงออกทางศิลปะของลักษณะการเขียนด้วยโหมดหมึกแบบลายมือวิจิตรแบบดั้งเดิมเมื่อนำไปใช้กับลายมือภาษาอาหรับสไตล์คูฟี ซึ่งไม่ได้เขียนด้วยโหมดหมึกและขนนก แต่เขียนโดยการแกะสลักหิน
การตรวจหาองค์ประกอบ
ปัจจุบัน คุณสามารถตรวจสอบว่าเครื่องมือเบราว์เซอร์รองรับรูปแบบแบบอักษรสีที่เฉพาะเจาะจงหรือไม่ได้โดยใช้การสแกน 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 font-palette
การใช้ชุดสีอื่นโดยไม่ต้องใช้แบบอักษรใหม่จะเป็นประโยชน์อย่างยิ่ง แต่โชคดีที่เรามีกลไกในการแก้ปัญหานี้ นั่นก็คือพร็อพเพอร์ตี้ CSS font-palette ทีม Chrome กำลังเพิ่มการรองรับจานสีแบบฟอนต์ใน Chrome
แบบอักษร COLRv1 และคุณ
หากสนใจแบบอักษร COLRv1 โปรดสอบถามผู้จำหน่ายแบบอักษรเกี่ยวกับแบบอักษรสี COLRv1 ที่จะใช้ในโปรเจ็กต์ของคุณ ลองดูตัวอย่างและเดโมด้านบน หรือจะลองสร้างแบบอักษรของคุณเองเลยก็ได้
หากมีความคิดเห็นเกี่ยวกับ COLRv1 ใน Chrome ให้โพสต์ในรายชื่ออีเมล blink-dev หรือรายงานปัญหาในเครื่องมือติดตามปัญหา หากมีความคิดเห็นเกี่ยวกับรูปแบบแบบอักษร COLRv1 โดยตรง โปรดแจ้งปัญหาที่ที่เก็บ GitHub ของข้อกำหนด COLRv1
เราตื่นเต้นกับ Chrome 98 ที่ทำให้ COLRv1 ได้ยกระดับความคิดสร้างสรรค์เกี่ยวกับตัวพิมพ์ขึ้นไปอีกขั้นในเว็บ
ดูข้อมูลเพิ่มเติม
หากต้องการรายละเอียดเพิ่มเติม เรามีแหล่งข้อมูลอีก 2 แห่งให้คุณ
หากต้องการดูวิธีการทำงานของ COLRv1 และวิธีติดตั้งใช้งานใน Chrome โปรดดูการบรรยายในการประชุม BlinkOn 15 ของ Dominik
- การประชุมสากล Unicode ฉบับที่ 45: แบบอักษร Vector Colors, พูดคุยโดย Roderick Sheeter, Peter Constable และ Dominik Röttsches (วิดีโอ, พูดคุยรายละเอียด)
- คอมไพเลอร์แบบอักษร nanoemoji ซึ่งสร้าง แบบอักษร COLRv1 จากรูปภาพ SVG
- ที่เก็บ GitHub สำหรับแบบอักษรสีของ Google Fonts ซึ่งมีบิลด์ปัจจุบันของ Noto Emoji, 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 และคนอื่นๆ ที่ได้มีส่วนร่วมใน COLRv1