Phông chữ vectơ gradient màu COLRv1 trong Chrome 98

Dominik Röttsches
Dominik Röttsches
Máy cán thanh
Thanh ghi hình

Phông chữ vectơ màu, nhỏ gọn, dễ nén với mọi hương vị chuyển màu mà bạn yêu thích.

Trong Chrome 98, nhóm Chrome và Phông chữ đã hỗ trợ thêm cho COLRv1, sự phát triển của định dạng phông chữ COLRv0 nhằm giúp phông chữ màu phổ biến bằng cách thêm độ dốc, kết hợp và kết hợp, đồng thời cải thiện khả năng sử dụng lại hình dạng bên trong để 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à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í nên đặt pixel. Thường thì như vậy là ổn. 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 có ý nghĩa. Ví dụ: cờ Cờ của người chuyển giới có sọc màu xanh lam nhạt và sọc hồng nhạt. với sọc xanh dương nhạt, hồng và trắng sẽ không truyền tải ý 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ọ 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, Biểu tượng cảm xúc gấu trúc với nét mặt buồn.). Kích thước tệp lớn, đặc biệt đố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 thấy sự gia tăng của việc sử dụng phông chữ màu mẫu quảng cá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 số ví dụ để bạn chơi:

Các thành phần mẫu từ Google Fonts dùng trong ví dụ này đang hoạt động trong API web của Google Fonts. Các chú thích này không có 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à 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ụ nguồn mở và miễn phí. 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 đó thử trong Chrome 98 trở lên. Hãy thử tự biến tấu trên Bungee Gia vị bằng cách thay đổi màu chuyển tiếp theo các hướng dẫn này.

Ví dụ: bạn có thể sửa đổi phông chữ Bungee Gia vị để có màu chuyển tiếp màu xanh lam và đỏ, như sau:

Từ cồn cát trong phông chữ màu Bungee của gia vị, có sắc độ màu xanh dương và đỏ.

Tweet kết quả của bạn tới địa chỉ @googlefonts 🙂 Tại sao bạn không thử kiểu chuyển màu dạng hình 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 đánh đổi khác nhau – nhưng cho đến nay thì chưa có cách nào thành công trên web. (Để tìm hiểu thêm về các đá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 các tính năng đồ hoạ và tệp nhỏ gọn của COLRv1 sẽ khiến 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ộ để 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 Gốc SVG cùng với tính năng kết hợp và kết hợp ở trên cùng. Có 4 loại màu nền: màu đồng nhất, màu chuyển tiếp tuyến tính, màu chuyển tiếp dạng hình tròn và màu chuyển tiếp quét/gradient. 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 thao tác dịch, xoay, chuyển đổi dọc và chuyển đổi theo tỷ lệ. Ngoài ra, API 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ữ.

Biểu tượng cảm xúc quả cầu pha lê màu xanh dương và tím với những ngôi sao tái hiện trên đế màu nâu.
Biểu tượng cảm xúc tái sử dụng hình dạng trong quả cầu pha lê

Hãy lấy biểu tượng cảm xúc quả cầu pha lê làm 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 định vị lại và sử dụng lại mà không bị trùng lặp trong tệp. Định dạng này cho phép bạn sử dụng lại toàn bộ ký tự (glyph) 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 mỗi 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 bằng cách chỉ tham chiếu các ký tự màu có sẵn. Đối với trường hợp sử dụng phông chữ trên web, COLRv1 sẽ nén tốt trong woff2. Ví dụ: một bản dựng 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 có kích thước khoảng 0,6 MB ở dạng woff2. Bản dựng của tập hợp Noto Emoji Glyph đầy đủ sẽ giảm từ 9 MB đối với phiên bản bitmap xuống còn 1,85 MB ở dạng COLRv1 + woff2.

Biểu đồ thanh so sánh Noto Emoji là phông chữ Bitmap và phông chữ COLRv1, khoảng 9MB so với 1,85MB
Cỡ chữ Noto Emoji kích thước CBDT/CBLC so với COLRv1 sau khi nén WOFF2.

Các trường hợp sử dụng phông chữ màu

Tiêu đề hấp dẫn

Phông chữ màu mới làm nổi bật các hình ảnh nổi bật, tiêu đề và biểu ngữ thực sự nổi bật.

Plakato Color Happy 2022 gồm các màu chuyển tiếp mạnh mẽ, tràn đầy năng lượng, do công ty sáng tạo underware tạo ra (Twitter: @underware, Instagram: @underwarefoundry). Hãy đọc thêm về bản phát hành COLRv1 đầu tiên của Underware trong bài đăng trên blog của họ.

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, người dùng của bạn có thể sử dụng biểu tượng cảm xúc. Ngày nay, bạn thường quét văn bản và thay thế bất kỳ biểu tượng cảm xúc nào gặp phải bằng hình ảnh để đảm bảo hiển thị nhất quán trên nhiều nền tảng và có 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 đó, những hình ảnh đó phải được chuyển trở lại văn bản trong quá trình thao tác bảng nhớ tạm. Dưới đây là một ví dụ thực tế:

Một đoạn mã hiển thị hình ảnh cùng dòng dưới dạng thẻ img và siêu dữ liệu như một phần của lịch sử trò chuyện
Thay thế hình ảnh trong Google Chat

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 ở dạ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 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.

Giao diện người dùng bộ chọn biểu tượng cảm xúc như được sử dụng trên GitHub
Bộ chọn biểu tượng cảm xúc trên GitHub

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 sắc 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.

Ba biểu tượng màu xanh lục trong đường viền màu đen
Biểu tượng Material hai tông màu trên https://fonts.google.com/icons

Nghệ thuật biểu đạt

Phông chữ màu tiết kiệm không gian hỗ trợ các hình thức biểu đạt nghệ thuật mới 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 độ 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 phong cách Kufi trong chữ Ả Rập, 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 bằng đá.

Chữ Ả Rập với chuyển màu từ đen sang đỏ.
Reem Kufi Ink, phông chữ Ả Rập của Khaled Hosny

Phát hiện tính năng

Hiện tại, bạn có thể xác định 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ác nhân người dùng nhận biết hoặc tìm trong thư viện như ChromaCheck của @PixelAmbacht để thử nghiệm kết xuất 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 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 làm việc CSS để cung cấp thông tin về việc hỗ trợ công nghệ phông chữ 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 tương lai của Chrome.

Nếu muốn sử dụng phông chữ màu trong dự án của mình ngay bây giờ khi tính năng hỗ trợ COLRv1 bị giới hạn trong Chrome, bạn có thể làm theo 2 cách: Yêu cầu nhà cung cấp phông chữ cung cấp phông chữ COLRv1 chứa các ký tự đơn sắc. Những tác nhân người dùng không hỗ trợ COLRv1 sẽ quay lại 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 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

Việc này sẽ cực kỳ hữu ích nếu việc sử dụng một bộ màu khác không đòi hỏi phông chữ mới. Rất may là 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 thu hút bạn, hãy hỏi nhà cung cấp phông chữ về phông chữ màu COLRv1 mà bạn có thể dùng trong dự án, thử dùng ví dụ và minh hoạ ở trên, hoặc tại sao bạn không tìm hiểu kỹ và thử nghiệm tự 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ủ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 về định dạng phông chữ COLRv1, hãy báo cáo sự cố tại Kho lưu trữ GitHub thông số kỹ thuật COLRv1.

Với Chrome 98, chúng tôi rất hào hứng về cách 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 chi tiết, chúng tôi có một số tài nguyên khác cho bạn:

Để tìm hiểu cách COLRv1 hoạt động và cách triển khai trong Chrome, hãy xem bài nói chuyện hội nghị BlinkOn 15 của Dominik.

Xác nhận

Xin cảm ơn rất nhiều nhờ Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantowski, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens và nhiều người khác đã đóng góp cho những đóng góp của họ.