แบบอักษรขนาดกะทัดรัด บีบอัดได้ พร้อมสีที่คุณชื่นชอบ แบบไล่ระดับสี
ใน Chrome 98 ทีม Chrome และ Fonts ได้เพิ่มการสนับสนุนสำหรับ COLRv1 ซึ่งเป็น วิวัฒนาการของรูปแบบตัวอักษร COLRv0 เพื่อทำให้แบบอักษรสีได้รับการนำไปใช้อย่างแพร่หลายโดย เพิ่มการไล่ระดับสี การประกอบและการรวม รวมถึงการใช้รูปร่างภายในซ้ำที่ได้รับการปรับปรุง สำหรับไฟล์แบบอักษรที่คมชัดและกะทัดรัดที่บีบอัดได้ดี
ลงสีเลย
สำหรับบนเว็บ โดยทั่วไปข้อความจะวาดด้วยสีที่ระบุไว้ใน CSS แบบอักษร
ไม่ได้กำหนดสีใดๆ โดยเฉพาะ เพียงแต่ระบุตำแหน่งที่พิกเซลควรจะเป็น
วางแล้ว ซึ่งเป็นเรื่องที่ดี CSS ช่วยให้ผู้เขียนเลือก
สี แต่บางครั้งรูปอักขระอาจมีหลายสี
ความหมาย ตัวอย่างเช่น ธงสถานะ 
ที่มีแถบสีฟ้า ชมพู และขาวนี้จะไม่แสดง
สื่อความหมายเดียวกันหากมีการวาดง่ายๆ ด้วยสีข้อความปัจจุบัน
ปัจจุบันผู้ใช้ส่วนใหญ่จะใช้อีโมจิเป็นแบบอักษรสีเดียวที่เห็น อีโมจิ
มักจะปรากฏบนเว็บผ่านแบบอักษรอีโมจิของระบบ หรือโดยการแทรกรูปภาพ
(ซึ่งมีข้อมูลแทรกของตัวเอง 
) ไฟล์ขนาดใหญ่
ขนาดต่างๆ โดยเฉพาะสำหรับแบบอักษรสีที่ใช้บิตแมป ทำให้ใช้งานเว็บได้ยาก
แบบอักษรสำหรับอีโมจิ การสนับสนุน COLRv1 และหวังว่า
การใช้แบบอักษรสีสร้างสรรค์บนเว็บและที่อื่นๆ
แสดงสีของคุณ
เราได้สร้างตัวอย่าง 2-3 ตัวอย่างให้คุณได้ลองใช้
เนื้อหาตัวอย่างจาก 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 เนทีฟบวก เพิ่มการรวมและการเรียบเรียงใน ด้านบน การเติมสีมี 4 ประเภท ได้แก่ สีทึบ การไล่ระดับสีแบบเส้นตรง และรัศมี การไล่ระดับสี และการไล่ระดับสีแบบกวาด/กรวย COLRv1 ช่วยให้คุณเปลี่ยนตำแหน่งและเปลี่ยนรูปแบบได้ องค์ประกอบรูปอักขระโดยใช้การแปลภาษา การหมุน การแสดงแสง และการปรับขนาดแบบเต็ม การเปลี่ยนรูปแบบ นอกจากนี้ยังมีการรองรับแบบอักษรแบบต่างๆ และการใช้ซ้ำ ซึ่งมีรูปแบบการกำหนดรูปร่างที่มีอยู่ในแบบอักษร
ลองนึกถึงอีโมจิลูกแก้วคริสตัลเป็นตัวอย่าง เช่น ไฮไลต์รูปดาว รูปร่างเหมือนกันแต่มีขนาดต่างกัน ซึ่งหมายความว่า รูปร่างหนึ่งๆ สามารถ เปลี่ยนตำแหน่งและนำมาใช้ซ้ำโดยไม่ซ้ำซ้อนในไฟล์ รูปแบบนี้ช่วยให้ คุณสามารถใช้อักขระแบบเต็มภายในรูปอักขระใหม่ โดยไม่ต้องซ้ำซ้อน เข้ารหัสรูปทรงเดียวกันสำหรับแต่ละรูปอักขระ ลองจินตนาการถึงแบบอักษรสีตกแต่งที่มี การประดับลายดอกไม้ โดยมีรูปทรงเดียวกันบนตัวอักษรต่างกัน โดยการอ้างอิงรูปอักขระสีที่มีอยู่ สำหรับกรณีการใช้งานแบบอักษรเว็บ COLRv1 จะบีบอัดได้ดีภายใต้ woff2 เช่น บิลด์ทดสอบของ Twemoji ที่ใช้ COLRv1 ใช้พื้นที่ประมาณ 1.2 MB แต่ขนาดประมาณ 0.6MB ในรูปแบบ woff2 บิลด์ของ ชุดสัญลักษณ์อีโมจิ Noto ทั้งหมดลดลงจาก 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 ซึ่งมาจาก เขียนด้วยปลายและหมึก แต่แกะสลักด้วยหิน
การตรวจหาฟีเจอร์
ขณะนี้ กำลังตรวจสอบว่าเครื่องมือของเบราว์เซอร์รองรับสีใดสีหนึ่งหรือไม่ รูปแบบแบบอักษรสามารถทำได้โดยใช้การดม {/1} 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 ใน Chrome โปรดโพสต์ลงใน รายชื่ออีเมลของ blink-dev หรือแจ้งปัญหาในเครื่องมือติดตามปัญหาของเรา หากมีความคิดเห็น ในรูปแบบแบบอักษร COLRv1 ด้วยตนเอง ให้แจ้งปัญหาที่ ที่เก็บ GitHub ตามข้อกำหนดของ COLRv1
เราตื่นเต้นกับ Chrome 98 ที่ได้เห็น COLRv1 ที่ทำให้ ความคิดสร้างสรรค์ในรูปแบบตัวพิมพ์บนเว็บ
ดูข้อมูลเพิ่มเติม
หากคุณต้องการรายละเอียดเพิ่มเติม เรามีแหล่งข้อมูลเพิ่มเติมให้คุณดังนี้
หากต้องการเรียนรู้วิธีการทำงานของ COLRv1 และวิธีใช้ COLRv1 ใน Chrome ลองดูการบรรยายในการประชุม BlinkOn 15 ของ Dominik
- การประชุมสากลของ Unicode #45: แบบอักษรสีเวกเตอร์ สนทนาโดย 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 และ คนอื่นๆ จากการมีส่วนร่วมใน COLRv1