แบบอักษรเวกเตอร์สีที่กะทัดรัดและบีบอัดได้ พร้อมเฉดสีไล่ระดับที่คุณชื่นชอบ
ใน 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 เวอร์ชันเนทีฟ บวกด้วยการผสมและการจัดวาง การเติมสีมี 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: ฟอนต์สีเวกเตอร์ โดย Roderick ชีเตอร์, 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