Phông chữ vectơ màu nhỏ gọn, dễ nén với tất cả các phông chữ ưa thích của bạn hương vị chuyển màu.
Trong Chrome 98, nhóm Chrome và Phông chữ đã thêm hỗ trợ cho COLRv1, một sự 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 thêm độ dốc, dùng phép 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 bên trong cho các tệp phông chữ sắc nét và nhỏ gọn, nén tốt.
Tô màu ngay
Trên web, văn bản thường được vẽ bằng một 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í pixel
. Đó thường là một dấu hiệu tốt. CSS cho phép tác giả linh hoạt chọn
. Tuy nhiên, đôi khi một ký tự chứa nhiều màu kết hợp với nhau
ý nghĩa. Ví dụ: cờ 
có sọc màu xanh dương nhạt, hồng và trắng này sẽ không
truyền tải cùng ý nghĩa nếu đơn giản là 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à 
). 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 trang web trở nên khó khăn
phông chữ cho biểu tượng cảm xúc. Bằng cách hỗ trợ COLRv1, chúng tôi hy vọng sẽ thấy sự gia tăng của
sử dụng phông chữ màu sắc sáng tạo trên web và hơn thế nữa.
Cho tôi xem màu của bạn
Chúng tôi đã tạo một vài ví dụ để bạn thử nghiệm:
Nội dung mẫu từ Google Fonts được sử dụng trong ví dụ này hiện có trong API web Google Fonts. Đó là không được liệt kê trong thư mục tại fonts.google.com dưới dạng chúng sẽ chỉ hoạt động trên Chrome 98 trở lên và giới thiệu các hoạt động 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í. Séc 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 đó thử chúng trong Chrome 98 trở lên. Hãy thử thể hiện phong cách riêng của bạn trên Bungee Spice bằng cách thay đổi màu chuyển tiếp sử dụng hướng dẫn tại đây.
Ví dụ: bạn có thể sửa đổi phông chữ Bungee Spice để có độ dốc màu xanh dương và đỏ như sau:
Đăng kết quả của bạn lên @googlefonts 🙂 Tại sao bạn không thử dùng hiệu ứng chuyển màu dạng hình tròn hoặc quét?
Tính năng mới với 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 cách khác nhau đánh đổi – nhưng chưa có lượt đánh đổi nào thành công trên web cho đến nay. (Để tìm hiểu thêm về những đá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 sự phát triển của COLRv0. Chúng tôi hy vọng rằng Với sự kết hợp giữa các tính năng đồ hoạ và các tệp nhỏ gọn của COLRv1, lựa chọn tốt cho nhiều trường hợp sử dụng phông chữ màu sắc. COLRv1 thêm độ dốc, kết hợp và pha trộn cũng như cải thiện tái sử dụng hình dạng bên trong để 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 Native (Quảng cáo gốc SVG) + Đã thêm tính năng kết hợp và kết hợp vào trên cùng. Có bốn loại màu nền: màu đồng nhất, chuyển màu tuyến tính, toả tròn và gradient quét/màu gradient. COLRv1 cho phép bạn định vị lại và biến đổi các yếu tố tượng hình sử dụng toàn bộ các yếu tố dịch, xoay, tuyệt đối và chuyển tỷ lệ phép biến đổi. Ngoài ra, API này còn hỗ trợ các biến thể phông chữ và tái sử dụng phông chữ định dạng hình dạng hiện có trong phông chữ.
Hãy xem biểu tượng cảm xúc quả cầu pha lê như một ví dụ: Các điểm nổi bật hình ngôi sao là có cùng hình dạng nhưng kích thước khác nhau, nghĩa là chỉ một hình dạng có thể đặ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 cần phải thừa mã hoá các hình dạng giống nhau cho từng ký tự. Hãy tưởng tượng một phông chữ màu sắc 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 bằng cách 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ữ trên web, COLRv1 có khả năng nén tốt dưới woff2. Ví dụ: bản dựng thử nghiệm của Twemoji sử dụng COLRv1 mất khoảng 1,2 MB tăng cao, nhưng là khoảng 0,6 MB ở dạng woff2. Phiên bản của Bộ Noto Emoji Glyph đầy đủ giảm từ 9MB cho phiên bản bitmap xuống còn 1,85MB ở biểu mẫu COLRv1+woff2.
Các trường hợp sử dụng phông chữ màu
Tiêu đề hấp dẫn
Phông chữ có màu sắc mới sẽ làm nổi bật hình ảnh, dòng tiêu đề và biểu ngữ bị loại.
Không còn hình ảnh thay thế khác: 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. Hôm nay thông thường, bạn cần 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 hiển thị nhất quán trên nhiều nền tảng và khả năng hỗ trợ các phiên bản biểu tượng cảm xúc mà hệ điều hành hỗ trợ. Sau đó, bạn phải chuyển những hình ảnh đó trở lại thành văn bản trong các 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 ở 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 thể hiện cảm xúc bằng biểu tượng, hàm COLRv1 mang đến cơ hội sử dụng một tệp phông chữ nhỏ gọn thay vì một 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 sắc trong phông chữ biểu tượng sẽ giúp tăng độ rõ ràng và giúp chữ viết dễ hiểu hơn.
Thể hiện nghệ thuật
Phông chữ màu sử dụng hiệu quả về không gian cho phép thể hiện các hình thức nghệ thuật mới bằng văn bản trên web. Ví dụ này về phông chữ Ả Rập kiểu Kufi sử dụng độ dốc màu làm diễn giải nghệ thuật về điều mà dòng mực của thư pháp truyền thống có thể truyền tải trông như thế nào khi được áp dụng cho kiểu viết Kufi của tiếng Ả Rập, vốn bắt nguồn từ không được viết bằng ngòi bút và mực mà được khắc trên đá.
Phát hiện tính năng
Hiện tại, xác định xem công cụ trình duyệt có hỗ trợ một màu cụ thể hay không có thể sử dụng định dạng phông chữ 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 một thư viện như ChromaCheck theo @PixelAmbacht để thử nghiệm quá trình kết xuất màu ký tự trên Canvas. Cả hai giải pháp đều không tối ưu. Việc kiểm thử tính năng sẽ phát hiện chỉ một tính năng cụ thể và tránh làm ảnh hưởng đến tác nhân người dùng. Tính năng ChromaCheck thư viện không cần thực hiện các thao tác canvas 2D tốn nhiều tài nguyên cho xác định mức độ 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 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à trong CSS. Nhóm này dự định phát hành công cụ phát hiện tính năng hiệu quả cho phông chữ màu và 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 COLRv1 khả năng hỗ trợ chỉ giới hạn ở Chrome, có hai cách để bạn có thể làm việc đó: Hỏi phông chữ của bạn nhà cung cấp phông chữ COLRv1 cũng chứa ký tự đơn sắc. Tác nhân người dùng không hỗ trợ COLRv1 sẽ quay lại chế độ kết xuất đơn sắc ký tự. Ngoài ra, bạn có thể dùng thư viện ChromaCheck hoặc tác nhân người dùng thử để 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 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 nhóm màu khác yêu cầu phông chữ mới. Rất may là có một cơ chế tồn tại: thuộc tính CSS của font-palette. Chiến lược phát hành đĩa đơn 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ữ của bạn về màu COLRv1 để sử dụng trong dự án của bạn, hãy thử ví dụ và bản minh hoạ ở trên hoặc tại sao không đi sâu vào và thử nghiệm với tạo video của riêng bạn?
Nếu bạn có phản hồi về COLRv1 trong Chrome, hãy đăng lên danh sách gửi thư của Blink-dev, hoặc báo cáo 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 trên chính định dạng phông chữ COLRv1, hãy gửi sự cố ở 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 độ hoàn toàn mới sáng tạo về 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, chúng tôi có một vài tài nguyên khác dành cho bạn:
Để tìm hiểu cách hoạt động của tính năng COLRv1 và cách triển khai tính năng này trong Chrome, hãy xem bài nói 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 Vector, bài nói chuyện của Roderick Sheeter, Peter Constable và Dominik Röttsches (video, trò chuyện chi tiết)
- trình biên dịch phông chữ nanoemoji, tạo ra Phông chữ COLRv1 từ hình ảnh SVG
- Google Fonts kho lưu trữ color-fonts trên GitHub 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
- Chương trình giới thiệu phông chữ BradleyInitials của DJR, khám phá COLRv1
- Công cụ và thư viện ChroomaCheck để công nghệ phát hiện tính năng phông chữ màu hiện có
Xác nhận
Rất 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 về đóng góp của họ cho COLRv1.