Phông chữ vectơ màu nhỏ gọn, dễ nén với tất cả các sắc thái chuyển màu mà bạn yêu thích.
Trong Chrome 98, nhóm Chrome và nhóm Phông chữ đã thêm tính năng hỗ trợ COLRv1, một sự phát triển của định dạng phông chữ COLRv0 nhằm phổ biến phông chữ màu bằng cách thêm các hiệu ứng chuyển màu, kết hợp và pha trộn, đồng thời cải thiện khả năng sử dụng lại hình dạng nội bộ để tạo ra các tệp phông chữ rõ ràng và nhỏ gọn có khả năng nén tốt.
Tô màu ngay
Trên web, văn bản thường được vẽ bằng màu sắc được chỉ định trong CSS. Phông chữ này không xác định bất kỳ màu sắc cụ thể nào, mà chỉ cho biết vị trí cần đặt các pixel. Đó thường là một điều tốt. CSS cho phép tác giả linh hoạt chọn màu. Tuy nhiên, đôi khi một ký tự có nhiều màu sắc và những màu sắc đó cùng nhau mang một ý nghĩa. Ví dụ: cờ 
có các sọc màu xanh dương nhạt, hồng và trắng sẽ không truyền tải cùng một ý nghĩa nếu chỉ được vẽ bằng màu văn bản hiện tại.
Ngày nay, đối với hầu hết người dùng, biểu tượng cảm xúc là phông chữ có màu duy nhất mà họ thấy. Biểu tượng cảm xúc thường xuất hiện trên web thông qua phông chữ biểu tượng cảm xúc của hệ thống hoặc bằng cách chèn hình ảnh (vốn có những điểm phức tạp riêng, 
). Kích thước tệp lớn, đặc biệt là đối với phông chữ màu dựa trên bitmap, khiến việc sử dụng phông chữ web cho biểu tượng cảm xúc trở nên khó khăn. Bằng cách hỗ trợ COLRv1, chúng tôi hy vọng sẽ thấy việc sử dụng phông chữ màu sáng tạo ngày càng phổ biến trên web và hơn thế nữa.
Giờ đây, bạn có thể tạo phông chữ COLRv1 của riêng mình bằng các công cụ miễn phí và mã nguồn mở. Hãy xem trình biên dịch phông chữ nanoemoji. Trình biên dịch này cho phép bạn tạo phông chữ COLRv1 từ hình ảnh nguồn SVG, sau đó dùng thử trong Chrome 98 trở lên. Hãy thử tạo phiên bản Bungee Spice của riêng bạn bằng cách thay đổi màu chuyển sắc theo hướng dẫn này.
Ví dụ: bạn có thể sửa đổi phông chữ Bungee Spice để có hiệu ứng chuyển màu xanh dương và đỏ, như sau:
Đăng kết quả của bạn lên Twitter cho @googlefonts 🙂 Bạn có thể thử độ dốc theo bán kính hoặc độ dốc quét.
Mới có COLRv1
Định dạng phông chữ hỗ trợ nhiều cách để hỗ trợ màu sắc, tất cả đều có những điểm đánh đổi khác nhau – nhưng cho đến nay, chưa có cách nào thành công trên web. (Để tìm hiểu thêm về các điểm đánh đổi, hãy xem bài nói chuyện của Dominik tại hội nghị BlinkOn 15.) Chrome 98 hỗ trợ COLRv1, một phiên bản nâng cấp của COLRv0. Chúng tôi hy vọng rằng sự kết hợp giữa các chức năng đồ hoạ và tệp nhỏ gọn của COLRv1 sẽ khiến định dạng này trở thành lựa chọn phù hợp cho nhiều trường hợp sử dụng phông chữ có màu. COLRv1 bổ sung các tính năng tạo hiệu ứng chuyển màu, kết hợp và pha trộn, đồng thời cải thiện khả năng sử dụng lại hình dạng nội bộ để tạo ra các tệp nhỏ gọn hơn nữa.
COLRv1 có khả năng biểu đạt tương đương với SVG Native cộng với hoà trộn và kết hợp được thêm vào. Có 4 loại màu tô: màu đồng nhất, kiểu chuyển màu tuyến tính, kiểu chuyển màu xuyên tâm và kiểu chuyển màu quét/hình nón. COLRv1 cho phép bạn định vị lại và biến đổi các phần tử glyph bằng cách sử dụng toàn bộ các phép biến đổi dịch, xoay, cắt và chia tỷ lệ. Ngoài ra, thư viện này còn hỗ trợ các biến thể phông chữ và sử dụng lại các định dạng định nghĩa hình dạng hiện có trong phông chữ.
Hãy nghĩ về biểu tượng quả cầu pha lê làm ví dụ: Các điểm nổi bật hình ngôi sao có cùng hình dạng nhưng kích thước khác nhau, nghĩa là bạn chỉ cần định vị lại và sử dụng lại một hình dạng mà không cần sao chép trong tệp. Định dạng này cho phép bạn sử dụng lại một glyph đầy đủ trong một glyph mới mà không cần mã hoá dư thừa các hình dạng giống nhau cho mỗi glyph. Hãy tưởng tượng một phông chữ màu trang trí có hoạ tiết hoa, trong đó các hình dạng hoa giống nhau được đặt trên các chữ cái khác nhau chỉ bằng cách tham chiếu đến các glyph màu hiện có. Đối với trường hợp sử dụng phông chữ trên web, COLRv1 nén tốt trong woff2. Ví dụ: một bản dựng kiểm thử của Twemoji sử dụng COLRv1 có kích thước khoảng 1,2 MB khi được mở rộng, nhưng chỉ khoảng 0,6 MB ở dạng woff2. Bản dựng của bộ Noto Emoji Glyph đầy đủ đã giảm từ 9 MB đối với phiên bản bitmap xuống còn 1,85 MB ở dạng COLRv1+woff2.
Các trường hợp sử dụng phông chữ có màu
Không còn thay thế hình ảnh: phông chữ biểu tượng cảm xúc
Nếu hỗ trợ nội dung do người dùng tạo, thì có thể người dùng của bạn sẽ sử dụng biểu tượng cảm xúc. Ngày nay, việc quét văn bản và thay thế mọi biểu tượng cảm xúc gặp phải bằng hình ảnh là rất phổ biến để đảm bảo khả năng hiển thị nhất quán trên nhiều nền tảng và khả năng hỗ trợ các biểu tượng cảm xúc mới hơn so với hệ điều hành. Sau đó, những hình ảnh đó phải được chuyển đổi trở lại thành văn bản trong các thao tác trên bảng nhớ tạm. Sau đây là một ví dụ thực tế:
Nếu bạn có một phông chữ biểu tượng cảm xúc, bạn chỉ cần kết xuất văn bản trong phông chữ đó, như sau:
<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>
Tương tự, trong thành phần biểu tượng cảm xúc phản ứng, COLRv1 mang đến cơ hội sử dụng một tệp phông chữ nhỏ gọn thay vì danh mục tài sản hình ảnh.
Hãy tưởng tượng bạn sẽ phải tìm nạp bao nhiêu hình ảnh cho một bộ chọn biểu tượng cảm xúc hoàn chỉnh!
Màu sắc trong phông chữ biểu tượng
Việc sử dụng màu sắc trong phông chữ biểu tượng giúp tăng độ rõ ràng và giúp người dùng dễ hiểu các ký tự hơn.
Biểu hiện nghệ thuật
Phông chữ màu tiết kiệm không gian cho phép các hình thức thể hiện nghệ thuật mới trong văn bản trên web. Ví dụ này về một phông chữ tiếng Ả Rập theo phong cách Kufi sử dụng các chuyển màu làm cách diễn giải nghệ thuật về cách dòng mực của thư pháp truyền thống có thể trông như thế nào khi được áp dụng cho phong cách Kufi của chữ viết Ả Rập. Phong cách này bắt nguồn từ việc không được viết bằng bút và mực mà được khắc trên đá.
Phát hiện đối tượng
Hiện tại, bạn có thể xác định xem một công cụ trình duyệt có hỗ trợ một định dạng phông chữ màu cụ thể hay không bằng cách dò tìm tác nhân người dùng hoặc bằng cách tìm kiếm trong một thư viện như ChromaCheck của @PixelAmbacht để kiểm thử việc kết xuất các glyph màu trên Canvas. Cả hai giải pháp đều không tối ưu. Thử nghiệm tính năng chỉ nên phát hiện một tính năng cụ thể và tránh phát hiện tác nhân người dùng. Thư viện ChromaCheck không cần thực hiện các thao tác canvas 2D tốn nhiều tài nguyên để xác định khả năng hỗ trợ.
Nhóm Chrome muốn cải thiện điều đó và đã bắt đầu một loạt các cuộc thảo luận [1, 2] trong nhóm công tác CSS để cung cấp thông tin về khả năng hỗ trợ công nghệ phông chữ của trình duyệt trong JavaScript và một cách khai báo trong CSS. Nhóm dự định phát hành tính năng phát hiện hiệu quả cho phông chữ màu và các công nghệ phông chữ khác trong một phiên bản Chrome trong tương lai.
Nếu muốn sử dụng phông chữ có màu trong dự án ngay bây giờ khi Chrome chỉ hỗ trợ COLRv1, bạn có thể làm theo hai cách: Yêu cầu nhà cung cấp phông chữ cung cấp cho bạn một phông chữ COLRv1 cũng chứa các glyph đơn sắc. Những tác nhân người dùng không hỗ trợ COLRv1 sẽ quay lại hiển thị các glyph đơn sắc. Ngoài ra, bạn có thể sử dụng thư viện ChromaCheck hoặc tính năng phát hiện tác nhân người dùng để xác định xem có hỗ trợ COLRv1 hay không. Sau đó, bạn phân phối CSS tải phông chữ COLRv1 trong các tác nhân người dùng hỗ trợ và sử dụng định dạng phông chữ thay thế như COLRv0, định dạng phông chữ bitmap hoặc OpenType SVG trong các trình duyệt khác.
Hỗ trợ bảng phông chữ CSS
Sẽ rất hữu ích nếu việc sử dụng một bộ màu khác không yêu cầu một phông chữ mới. Rất may, có một cơ chế: thuộc tính font-palette của CSS. Nhóm Chrome đang nỗ lực thêm khả năng hỗ trợ bảng màu phông chữ trong Chrome.
Phông chữ COLRv1 và bạn
Nếu bạn quan tâm đến phông chữ COLRv1, hãy hỏi nhà cung cấp phông chữ của bạn về phông chữ màu COLRv1 để sử dụng trong dự án của bạn, hãy thử các ví dụ và bản minh hoạ ở trên hoặc tại sao bạn không bắt tay ngay vào việc tạo phông chữ của riêng mình?
Nếu bạn có ý kiến phản hồi về COLRv1 trong Chrome, hãy đăng lên danh sách gửi thư blink-dev hoặc báo cáo vấn đề trong trình theo dõi vấn đề của chúng tôi. Nếu bạn có ý kiến phản hồi về chính định dạng phông chữ COLRv1, hãy gửi vấn đề tại kho lưu trữ GitHub về quy cách COLRv1.
Với Chrome 98, chúng tôi rất hào hứng với cách COLRv1 mang đến một cấp độ hoàn toàn mới cho khả năng sáng tạo kiểu chữ trên web.
Tìm hiểu thêm
Nếu bạn muốn biết thêm thông tin chi tiết, chúng tôi có một số tài nguyên khác dành cho bạn:
Để tìm hiểu cách COLRv1 hoạt động và cách triển khai COLRv1 trong Chrome, hãy xem bài nói chuyện của Dominik tại hội nghị BlinkOn 15.
- Hội nghị Unicode quốc tế lần thứ 45: Phông chữ vectơ có màu, bài nói chuyện của Roderick Sheeter, Peter Constable và Dominik Röttsches (video, thông tin chi tiết về bài nói chuyện)
- Trình biên dịch phông chữ nanoemoji, tạo phông chữ COLRv1 từ hình ảnh SVG
- Kho lưu trữ GitHub về phông chữ có màu của Google Fonts có chứa các bản dựng hiện tại của Noto Emoji, Twemoji và các phông chữ mẫu khác
- Bản trình bày của DJR về phông chữ Bradley Initials, khám phá COLRv1
- Thư viện và công cụ ChromaCheck để phát hiện các công nghệ phông chữ màu hiện có
Lời cảm ơn
Xin chân thành cảm ơn 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 và những người khác đã đóng góp cho COLRv1.