Phông chữ vectơ màu nhỏ gọn, dễ nén với tất cả các hương vị gradient mà bạn yêu thích.
Trong Chrome 98, nhóm Chrome và Phông chữ đã hỗ trợ thêm COLRv1, một phiên bản phát triển của định dạng phông chữ COLRv0 nhằm giúp phông chữ màu trở nên phổ biến bằng cách 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 tái sử dụng hình dạng bên trong cho các tệp phông chữ sắc nét và nhỏ gọn giúp 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, nó chỉ cho biết vị trí nên đặt pixel. Thường thì đó là đ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ự chứa nhiều màu cùng có ý nghĩa. Ví dụ: cờ 
có các sọc xanh dương nhạt, hồng và trắng này 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ữ màu duy nhất mà họ nhìn 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ó chức năng riêng là 
). Kích thước tệp lớn, đặc biệt là với phông chữ màu dựa trên bitmap, khiến việc sử dụng phông chữ trên 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 thấy việc sử dụng phông chữ màu sáng tạo ngày càng gia tăng trên web và nhiều nơi khác.
Cho tôi xem màu của bạn
Chúng tôi đã tạo một vài ví dụ để bạn sử dụng:
Các thành phần mẫu từ Google Fonts được sử dụng trong ví dụ này đang xuất hiện trong API web Google Fonts. Các tác vụ này không được liệt kê trong thư mục tại fonts.google.com vì chúng sẽ chỉ hoạt động trên Chrome 98 trở lên và hiển thị tác phẩm 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ụ nguồn mở và miễn phí. Hãy xem trình biên dịch phông chữ Nanoemoji, 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ử biến tấu theo cách riêng của bạn trên Bungee Gia vị bằng cách thay đổi màu chuyển màu bằng cách sử dụng các hướng dẫn này.
Ví dụ: bạn có thể sửa đổi phông chữ Bungee Gia vị để có độ dốc màu xanh dương và đỏ, như sau:
Hãy đăng kết quả của bạn tới địa chỉ @googlefonts 🙂 Tại sao bạn không thử chuyển màu theo hướng tròn hoặ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 ưu điểm khác nhau, nhưng cho đến nay thì chưa có phương pháp nào thành công trên web. (Để tìm hiểu thêm về các lựa chọn đánh đổi, hãy xem bài nói chuyện tại hội nghị BlinkOn 15 của Dominik.) 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 tính năng đồ hoạ và tệp nhỏ gọn của COLRv1 sẽ giúp COLRv1 trở thành một 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 tính năng chuyển màu, kết hợp và kết hợp, đồng thời cải thiện việc sử dụng lại hình dạng nội bộ để làm cho các 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 kết hợp và kết hợp được thêm vào trên cùng. Có 4 loại màu nền: màu đồng nhất, chuyển màu tuyến tính, chuyển màu dạng hình tròn và chuyển màu dạng quét/chuyển màu tuần tự. COLRv1 cho phép bạn định vị lại và biến đổi các phần tử ký tự bằng cách sử dụng một tập hợp đầy đủ các phép biến đổi dịch, xoay, chuyển đổi tuyệt đối và chuyển đổi tỷ lệ. Ngoài ra, phiên bả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 xem biểu tượng cảm xúc trong quả cầu pha lê như một ví dụ: Các điểm nổi bật hình ngôi sao có hình dạng giống nhau nhưng kích thước khác nhau, nghĩa là chỉ có một hình dạng có thể được đặt lại vị trí 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 toàn bộ ký tự trong một ký tự mới mà không phải mã hoá thừa các hình dạng tương tự cho từng ký tự. Hãy tưởng tượng một phông chữ màu trang trí với đồ trang trí 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 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ụ: một bản thử nghiệm của Twemoji sử dụng COLRv1 sẽ mất khoảng 1,2 MB được tăng cường, nhưng lại khoảng 0,6 MB ở dạng woff2. Bản dựng của bộ biểu tượng cảm xúc Noto đầ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ữ màu
Dòng tiêu đề hấp dẫn
Phông chữ màu tươi làm cho các điểm nổi bật, dòng tiêu đề và biểu ngữ thực sự nổi bật.
Không còn thay thế hình ảnh: 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, bạn có thể quét văn bản và thay thế bất kỳ biểu tượng cảm xúc nào bằng hình ảnh để đảm bảo tính nhất quán khi hiển thị 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 khả năng mà hệ điều hành hỗ trợ. Sau đó, những hình ảnh đó sẽ được chuyển trở lại thành văn bản trong thao tác 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 bằng 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 cung cấp 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 sẽ phải tìm nạp bao nhiêu hình ảnh để có đượ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 sẽ giúp tăng thêm sự rõ ràng và giúp các ký tự trở nên dễ hiểu hơn.
Biểu cảm nghệ thuật
Phông chữ màu tiết kiệm không gian giúp mang đến những hình thức mới để biểu đạt nghệ thuật trong văn bản trên web. Ví dụ về phông chữ tiếng Ả Rập kiểu Kufi này sử dụng các độ dốc màu như một cách diễn giải nghệ thuật về dòng mực của thư pháp truyền thống khi áp dụng cho kiểu viết văn học Ả Rập Kufi, bắt nguồn từ việc không được viết bằng ngòi và mực mà được chạm 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 sử dụng tính năng nhận biết tác nhân người dùng hoặc tìm kiếm trong thư viện như ChromaCheck của @PixelAmbacht để kiểm tra khả năng hiển thị ký tự màu trên Canvas. Cả hai giải pháp đều không tối ưu. Hoạt động 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 hoạt động 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 chuỗi các 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 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 phiên bản Chrome tương lai.
Nếu bạn muốn sử dụng phông chữ màu trong dự án của mình ngay bây giờ khi khả năng hỗ trợ COLRv1 bị giới hạn trong Chrome, có hai cách bạn có thể làm điều đó: Yêu cầu nhà cung cấp phông chữ của bạn cung cấp phông chữ COLRv1 chứa glyph đơn sắc. Những tác nhân người dùng không hỗ trợ COLRv1 sẽ quay lại sử dụng tính năng kết xuất 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 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 việc hỗ trợ các tác nhân người dùng và sử dụng một định dạng phông chữ thay thế như COLRv0, một đị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 phông chữ mới. Rất may đã có một cơ chế: thuộc tính CSS font-palette. Nhóm Chrome đang nỗ lực để thêm hỗ trợ bảng phông chữ trong Chrome.
Phông chữ COLRv1 và bạn
Nếu phông chữ COLRv1 làm bạn quan tâm, hãy hỏi nhà cung cấp phông chữ về phông chữ màu COLRv1 để sử dụng trong dự án, thử các ví dụ và bản minh hoạ ở trên hoặc tại sao bạn không đi sâu vào và thử nghiệm 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ư củablink-dev hoặc báo cáo sự cố 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ề chính định dạng phông chữ COLRv1, hãy báo cáo 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 về cách COLRv1 mang đến một cấp độ sáng tạo hoàn toàn mới về phông chữ cho web.
Tìm hiểu thêm
Nếu bạn muốn biết thêm thông tin, chúng tôi có một số tài nguyên dành cho bạn:
Để tìm hiểu cách COLRv1 hoạt động và cách triển khai trong Chrome, hãy xem buổi trò chuyện tại hội nghị BlinkOn 15 của Dominik.
- Hội nghị Unicode quốc tế #45: Phông chữ màu vectơ, bài nói chuyện của Roderick, Peter Constable và Dominik Röttsches (video, thông tin chi tiết về buổi trò 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ữ GitHubcolor-fonts 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
- Video giới thiệu 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 các công nghệ phông chữ màu hiện có
Xác nhận
Xin chân thành cảm ơn những đóng góp của 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à COLRv1.