Phông chữ vectơ màu sắc, nhỏ gọn, dễ nén với tất cả các màu chuyển màu mà bạn yêu thích.
Trong Chrome 98, nhóm Chrome và Phông chữ đã thêm tính năng hỗ trợ cho 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 hiệu ứng chuyển màu, kết hợp và pha trộn, cũng như cải thiện khả năng sử dụng lại hình dạng nội bộ cho các tệp phông chữ sắc nét 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 được chỉ định trong CSS. Phông chữ không xác định bất kỳ màu cụ thể nào, mà chỉ cho biết vị trí đặt các pixel. Điều đó thường là 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ự chứa nhiều màu sắc cùng nhau có ý nghĩa. Ví dụ: cờ 
này 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 ý nghĩa tương tự 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ữ 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 (có các chức năng 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 sự gia tăng của việc sử dụng phông chữ màu sáng tạo trên web và nhiều nơi khác.
Cho tôi xem màu sắc của bạn
Chúng tôi đã tạo một số ví dụ để bạn tham khảo:
Các thành phần mẫu từ Google Fonts được sử dụng trong ví dụ này đang hoạt động trong API web Google Fonts. Các phông chữ này không được liệt kê trong thư mục tại fonts.google.com vì chỉ hoạt động trên Chrome 98 trở lên và giới thiệu công việc thử nghiệm.
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à 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 đó thử phông chữ đó 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 tiếp 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:
Hãy tweet kết quả của bạn đến @googlefonts 🙂 Tại sao không thử hiệu ứng chuyển màu dạng hình tròn hoặc quét?
Mới có trong COLRv1
Định dạng phông chữ hỗ trợ nhiều cách để hỗ trợ màu sắc, tất cả đều có các đ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 yếu tố đá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 phát triển của COLRv0. Chúng tôi hy vọng rằng sự kết hợp giữa khả năng đồ hoạ và tệp nhỏ gọn của COLRv1 sẽ là lựa chọn phù hợp cho nhiều trường hợp sử dụng phông chữ màu. COLRv1 thêm 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 tệp nhỏ gọn hơn nữa.
COLRv1 có khả năng biểu đạt gần tương đương với SVG gốc cộng với tính năng hòa 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ử phông chữ bằng cách sử dụng một bộ đầy đủ các phép biến đổi dịch, xoay, xiên và chia tỷ lệ. Ngoài ra, phông chữ 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 lấy 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, tức là chỉ một hình dạng có thể được định vị lại và sử dụng lại mà không bị trùng lặp bên trong tệp. Định dạng này cho phép bạn sử dụng lại một ký tự đầy đủ trong một ký tự mới mà không cần phải mã hoá lại cùng một hình dạng cho mỗi ký tự. Hãy tưởng tượng một phông chữ màu trang trí với các hoa văn hoa, trong đó cùng một hình dạng hoa được đặt trên các chữ cái khác nhau chỉ bằng cách tham chiếu các ký tự màu hiện có. Đối với trường hợp sử dụng phông chữ web, COLRv1 nén tốt trong woff2. Ví dụ: bản dựng thử nghiệm của Twemoji sử dụng COLRv1 chiếm khoảng 1,2 MB khi tăng cường, nhưng chỉ khoảng 0,6 MB ở dạng woff2. Một bản dựng của bộ ký tự biểu tượng cảm xúc Noto đầy đủ được giảm từ 9 MB cho 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ữ màu
Dòng tiêu đề hấp dẫn
Phông chữ có màu sắc tươi mới giúp các điểm nổi bật, dòng tiêu đề và biểu ngữ trở nên thật nổi bật.
Không thay thế hình ảnh nữa: phông chữ biểu tượng cảm xúc
Nếu bạn hỗ trợ nội dung do người dùng tạo, thì người dùng có thể 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 kết xuất 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 hỗ trợ. Sau đó, bạn phải chuyển các hình ảnh đó trở lại 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 có phông chữ biểu tượng cảm xúc, bạn chỉ cần hiển thị 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 phản ứng bằng biểu tượng cảm xúc, COLRv1 mang đến cơ hội sử dụng tệp phông chữ nhỏ gọn thay vì danh mục thành phần hình ảnh.
Hãy tưởng tượng bạn phải tìm nạp bao nhiêu hình ảnh để có một bộ chọn biểu tượng cảm xúc hoàn chỉnh!
Màu trong phông chữ biểu tượng
Việc sử dụng màu trong phông chữ biểu tượng giúp tăng độ rõ ràng và giúp các ký tự dễ hiểu hơn.
Biểu đạt 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ụ về phông chữ Ả Rập kiểu Kufi này sử dụng hiệu ứng chuyển màu để diễn giải nghệ thuật về dòng mực của thư pháp truyền thống có thể trông như thế nào khi áp dụng cho kiểu chữ Kufi của chữ viết Ả Rập, bắt nguồn từ việc không được viết bằng ngòi và mực mà được khắc trên đá.
Phát hiện tính năng
Hiện tại, bạn có thể tìm hiểu xem 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 đánh hơi tác nhân người dùng hoặc bằng cách tìm kiếm trong thư viện như ChromaCheck của @PixelAmbacht để kiểm thử kết xuất các ký tự màu trên Canvas. Cả hai giải pháp đều không tối ưu. Quy trình kiểm thử tính năng chỉ nên phát hiện một tính năng cụ thể và tránh việc 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 trên 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 vấn đề này và đã bắt đầu một loạt cuộc thảo luận [1, 2] trong nhóm làm việc CSS để cung cấp thông tin về việc hỗ trợ công nghệ phông chữ của trình duyệt trong JavaScript và khai báo trong CSS. Nhóm nghiên cứu dự định phát hành tính năng phát hiện tính năng 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ữ màu trong dự án ngay bây giờ khi tính năng hỗ trợ COLRv1 chỉ giới hạn ở Chrome, bạn có thể làm theo hai cách: Yêu cầu nhà cung cấp phông chữ cung cấp phông chữ COLRv1 cũng chứa các ký tự đơn sắc. Các tác nhân người dùng không hỗ trợ COLRv1 sẽ quay lại kết xuất các ký tự đơn sắc. Ngoài ra, bạn có thể sử dụng thư viện ChromaCheck hoặc tính năng đánh hơi 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 màu 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 phông chữ mới. Rất may, có một cơ chế tồn tại: thuộc tính CSS font-palette. Nhóm Chrome đang nỗ lực hỗ trợ bảng điều khiển 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ữ về phông chữ màu COLRv1 để sử dụng trong dự án của bạn, thử các ví dụ và bản minh hoạ ở trên hoặc tại sao không thử ngay và thử nghiệm với việc tạo phông chữ của riêng bạn?
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 gửi vấn đề trong công cụ theo dõi lỗi của chúng tôi. Nếu bạn có ý kiến phản hồi về định dạng phông chữ COLRv1, hãy gửi vấn đề tại kho lưu trữ GitHub về thông số kỹ thuật COLRv1.
Với Chrome 98, chúng tôi rất vui mừng khi COLRv1 mang đến một cấp độ sáng tạo hoàn toàn mới về kiểu chữ cho 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 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ữ màu vectơ, do Roderick Sheeter, Peter Constable và Dominik Röttsches trình bày (video, thông tin chi tiết về bài nói)
- 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ữ màu của Google Fonts 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
- Công cụ và thư viện ChromaCheck để phát hiện tính năng của các công nghệ phông chữ màu hiện có
Lời cảm ơn
Cảm ơn rất nhiều 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.