Theo Toshi Omagari, tác giả của Arcade Game Typography, thế giới phông chữ kỹ thuật số nhiều màu đầu tiên được tạo ra vào năm 1982 cho một trò chơi điện tử chưa bao giờ được phát hành có tên là Insector. Phông chữ nhiều màu, đôi khi được gọi là loại màu sắc, vẫn còn tương đối hiếm trên web, mặc dù Định dạng phông chữ COLR đã có hỗ trợ đầy đủ trên nhiều trình duyệt kể từ năm 2018 (ngay cả trong Internet Explorer!).

Công nghệ này mở ra một mạch sáng tạo kiểu chữ hoàn toàn mới. Mặc dù một số phông chữ màu mà tôi đã thấy khá buồn tẻ, nhưng tốt nhất, các phông chữ có màu sắc rất vui nhộn, sáng tạo và thu hút sự chú ý. Với cả việc bổ sung các tính năng CSS mới - bao gồm font-palette tài sản và @font-palette-values quy tắc - để kiểm soát bảng màu của phông chữ màu và sự phát triển của định dạng phông chữ COLR, đây là thời điểm tuyệt vời để đi sâu vào và thử nghiệm những gì mà kiểu chữ web hiện đại có thể làm.

Hỗ trợ COLR

Tôi cuối cùng đã viết về phông chữ màu vào năm 2018. Vào thời điểm đó, có bốn tiêu chuẩn khác nhau cho các kiểu chữ nhiều màu: OpenType-SVG, COLR, SBIX và CBDT / CBLC. Bạn có thể dùng Kiểm tra sắc độ để xem trình duyệt của bạn hỗ trợ những định dạng phông chữ màu nào.

Google Chrome đã đã đánh dấu OpenType-SVG là “wontfix” nghĩa là định dạng đó sẽ không bao giờ được Chrome hoặc Edge hỗ trợ. Hầu hết có thể bỏ qua SBIX và CBDT / CBLC để sử dụng trên web vì cả hai đều dựa trên hình ảnh raster và trở nên mờ ở kích thước phông chữ lớn hơn. Kích thước tệp lớn của phông chữ dựa trên bitmap cũng khiến chúng trở thành một lựa chọn tồi cho web.

Ulrike Rausch là người tạo ra LiebeHeide, một phông chữ màu bitmap tái tạo một cách kỳ lạ giao diện của một cây bút bi. “Mục tiêu lớn nhất của tôi là luôn sao chép văn bản viết tay một cách chân thực nhất có thể,” cô ấy nói với tôi. “Đối với LiebeHeide, cuối cùng tôi đã có thể mô phỏng các thuộc tính thủ công này bằng một phông chữ. Nhược điểm? Tất cả các hình ảnh PNG trong tệp phông chữ cộng lại và dẫn đến kích thước tệp OTF rất lớn. Đây có thể không phải là vấn đề đối với các ứng dụng dành cho máy tính để bàn, như Adobe InDesign, nhưng để sử dụng trên web, phông chữ này hầu như không được áp dụng ”.

Tất cả các trình duyệt đều hỗ trợ phông chữ COLR (bây giờ thường được gọi là COLRv0). Phiên bản 98 của Chrome (và Edge), được phát hành vào tháng 1, đã thêm hỗ trợ cho COLRvXNUMX, một sự phát triển của định dạng này.

COLRv0 và COLRv1

COLRv1 là một phần của Tiêu chuẩn OpenType 1.9. Trong khi COLRv0 ban đầu thiếu nhiều khả năng sáng tạo của OpenType-SVG, COLRv1 phù hợp với những khả năng đó đồng thời tránh được một số nhược điểm nhất định. Ví dụ: COLRv0 chỉ có thể làm được màu đồng nhất trong khi COLRv1 có thể làm được tuyến tính, xuyên tâm, và gradient conic. Định dạng cũng thêm tổng hợp và pha trộn và cho phép tái sử dụng hình dạng để tiết kiệm kích thước tệp.

Chuyên gia về kiểu chữ Roel Nieskins giải thích: “Tôi từng nói định dạng OpenType-SVG là định dạng tốt nhất vì nó cung cấp tính linh hoạt nhất - cho đến khi tôi nhận ra rằng định dạng này quá phức tạp đối với một công việc cấp thấp như kết xuất văn bản. Nó thực hiện một tập hợp con cơ bản của SVG ở cấp độ kết xuất phông chữ. Nhưng nó không hoạt động tốt với các công nghệ phông chữ khác (gợi ý, các trục biến đổi, v.v.) và thật khó để triển khai. Vì vậy, tôi đã chuyển sang COLR. Về cơ bản COLR sử dụng lại mọi thứ mà phông chữ OpenType đã có. Nó 'chỉ' thêm lớp và khả năng thay đổi màu của mỗi lớp. Đơn giản mà hiệu quả."

COLRv1 hoàn toàn tương thích với các trục phông chữ có thể thay đổi và đã có các ví dụ về phông chữ COLR có thể thay đổi như Huy hiệu khen, Màu Plakato và Màu Rocher.

Dưới đây là một ví dụ nổi bật từ Ulrike Rausch về những gì có thể xảy ra với định dạng, một kiểu chữ (hiện chưa được phát hành) tái tạo kỹ thuật số giao diện của một dấu hiệu neon:

Akiem Helmling của xưởng đúc loại Đồ lót say mê COLRv1, nói với tôi rằng “[t] anh ấy định dạng COLRv1 có thể có tác động tương tự (hoặc thậm chí lớn hơn) đối với thiết kế kiểu so với các phông chữ biến đổi đã có trong những năm gần đây.” Đối với Akiem, đó chắc chắn là định dạng cao cấp. “Tất cả các định dạng màu trước đây đều là những kẻ xấu để thêm màu vào glyph. Mặc dù OpenType-SVG được một số người coi là một giải pháp tốt, theo quan điểm của tôi, nó hoàn toàn không phải như vậy. Theo quan điểm thực dụng, SVG là một 'căn phòng bị khóa' trong cấu trúc mở của OpenType. Không có cách nào để sử dụng lại hoặc liên kết dữ liệu hoặc để tạo kết nối giữa các bảng phông chữ khác và bảng SVG. Và vì điều này, chúng tôi không thể tạo ra một phông chữ có thể thay đổi với dữ liệu SVG có thể thay đổi được. "

Vẫn còn là những ngày đầu cho định dạng này. Mozilla vẫn chưa xuất xưởng COLRv1 nhưng đã sử dụng một vị trí tích cực về định dạng, tuyên bố rằng nó có “tiềm năng thay thế phông chữ OpenType-SVG trong việc sử dụng web.” Apple không muốn triển khai nó trong Safari.

Phông chữ COLRv1 sẽ vẫn hiển thị và có thể đọc được trong các trình duyệt này nhưng tất cả các chữ cái sẽ là một màu đồng nhất duy nhất (bạn có thể đặt bằng CSS color tài sản, giống như với một phông chữ bình thường). Chúng tôi vẫn chưa thấy nhiều xưởng đúc kiểu chữ phát hành kiểu chữ COLRv1 và một số công cụ thiết kế phổ biến như Figma thậm chí không hỗ trợ COLRv0, nhưng tôi hy vọng và tin rằng nó sẽ là tương lai của kiểu chữ màu trên web. Trong thời gian ngắn COLRv1 xuất hiện, đã có một số ví dụ tuyệt đẹp về những gì công nghệ này có thể làm, chẳng hạn như Reem Kufi và Tên viết tắt Bradley.

COLR và CSS

Nếu bạn đang sử dụng phông chữ màu, bạn có thể muốn kiểm soát màu sắc của nó. Cho đến nay, điều đó là không thể làm được với CSS. Các font-palette thuộc tính mang lại sức mạnh để ghi đè bảng màu mặc định của một kiểu chữ và áp dụng kiểu chữ của riêng bạn. Thuộc tính này hoạt động trên các kiểu chữ COLRv0 và COLRv1. (Táo Myles Maxfield giải thích rằng phông chữ SVG có thể opt-in sử dụng bảng màu, trong khi tất cả các màu của kiểu chữ COLR tự động bị CSS ghi đè.)

Tạo ra một bảng màu phù hợp là một nghệ thuật tốt. Một số nhà thiết kế kiểu đã thực hiện công việc khó khăn cho chúng tôi và bao gồm các bảng màu thay thế bên trong phông chữ. Bạn có thể chọn từ các bảng màu khác nhau này bằng cách sử dụng base-palette trong CSS.

Làm thế nào để bạn biết được liệu một phông chữ có cung cấp một bảng màu thay thế hay không? Trang web cho phông chữ có thể cho bạn biết. Nếu không, có một công cụ tiện dụng được gọi là Nước xốt Wakamai điều đó sẽ liệt kê tất cả các cách phối màu có sẵn (được hiển thị trong hình ảnh bên dưới). Đối với ví dụ này, tôi sẽ sử dụng Màu Rocher, một phông chữ màu có thể thay đổi miễn phí từ Henrique Beier với sự rung cảm của Flintstones. Nhìn vào Wakamai Foundue, chúng ta có thể thấy rằng kiểu chữ này sử dụng bốn màu và đi kèm với XNUMX tùy chọn bảng màu khác nhau.

Sử dụng base-palette: 0 sẽ chọn bảng màu mặc định (trong trường hợp của Rocher, đó là các màu cam và nâu).

Sử dụng base-palette: 1 sẽ chọn bảng thay thế đầu tiên được xác định bởi người tạo kiểu chữ, v.v. Trong ví dụ mã sau, tôi đang chọn một bảng màu có các sắc thái khác nhau của màu xám:

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

Khi bạn đã chọn một bảng màu với CSS @font-palette-values , bạn có thể áp dụng nó bằng cách sử dụng font-palette bất động sản:

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

Tất nhiên, bạn có thể muốn tạo của riêng bạn bảng màu để phù hợp với màu thương hiệu của bạn hoặc để đáp ứng khả năng thiết kế của riêng bạn. Nếu bạn định ghi đè tất cả các màu thì bạn không cần chỉ định base-palette.

Hãy đi Bungee từ nhà thiết kế kiểu tiên phong David Jonathan Ross như một ví dụ. Nó chỉ sử dụng hai màu theo mặc định là đỏ và trắng. Trong ví dụ sau, tôi đang ghi đè cả hai màu của phông chữ, vì vậy base-palette không quan trọng và được bỏ qua:

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}

Ngoài ra, bạn có thể đặt base-palette như một điểm bắt đầu và chỉ thay đổi một số màu có chọn lọc. Dưới đây, tôi đang sử dụng bảng màu xám của Rocher, nhưng ghi đè một màu bằng xanh bạc hà:

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors:
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

Khi chỉ định override-colors rất khó để biết bit nào của phông chữ sẽ bị ghi đè bởi con số nào - bạn phải thử và thử nghiệm và đạt được hiệu quả mong muốn thông qua thử và sai.

Nếu bạn muốn, bạn thậm chí có thể thay đổi màu sắc của phông chữ biểu tượng cảm xúc, chẳng hạn như Twemoji (hiển thị bên dưới) hoặc Noto. Đây là một bản demo thú vị từ một kỹ sư phông chữ tại Google.

Những hạn chế hiện tại

Một hạn chế đáng tiếc, ít nhất là vào thời điểm hiện tại là các thuộc tính tùy chỉnh CSS không hoạt động trong @font-palette-values. Điều đó có nghĩa là nội dung sau không hợp lệ:

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

Một hạn chế khác: hoạt ảnh và chuyển tiếp từ một font-palette sang bảng khác không nội suy - nghĩa là bạn có thể chuyển ngay lập tức từ bảng màu này sang bảng màu khác, nhưng không thể dần dần chuyển động giữa chúng. Giấc mơ của tôi về một phông chữ biểu tượng cảm xúc hoạt hình buồn tẻ đã không thành hiện thực.

Hỗ trợ trình duyệt

font-palette và @font-palette-values đã được hỗ trợ trong Safari kể từ phiên bản 15.4 và đã cập bến Chrome và Edge với việc phát hành phiên bản 101.

Trường hợp sử dụng

Bạn có thể đã hình dung ra cách bạn có thể sử dụng phông chữ màu trong các dự án của riêng mình. Tuy nhiên, có một số trường hợp sử dụng cụ thể đáng được gọi ra.

Phông chữ COLR và biểu tượng

Phông chữ biểu tượng có thể không còn là phương pháp phổ biến nhất để hiển thị các biểu tượng trên web (Chris giải thích tại sao) nhưng chúng vẫn được sử dụng rộng rãi. Nếu bạn sử dụng phông chữ biểu tượng có nhiều màu, như Duotone từ FontAwesome hoặc các biểu tượng hai tông màu từ Thiết kế tài liệu, font-palette có thể cung cấp một phương pháp dễ dàng hơn để tùy chỉnh.

Giải quyết vấn đề về biểu tượng cảm xúc

Nolan Lawson gần đây đã viết về vấn đề khi sử dụng biểu tượng cảm xúc trên web. Các Blog nhà phát triển Chrome giải thích một giải pháp hiện tại khá phức tạp:

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, việc 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 rất phổ biến để đảm bảo hiển thị đa nền tảng nhất quán và khả năng hỗ trợ các biểu tượng cảm xúc mới hơn hệ điều hành hỗ trợ. Những hình ảnh đó sau đó phải được chuyển trở lại thành văn bản trong các hoạt động của khay nhớ tạm.

Nếu nó nhận được hỗ trợ trình duyệt nhiều hơn, phông chữ biểu tượng cảm xúc COLRv1 sẽ cung cấp một cách tiếp cận đơn giản hơn nhiều. COLRv1 cũng đi kèm với lợi ích là trông sắc nét ở bất kỳ kích thước nào, trong khi các biểu tượng cảm xúc của trình duyệt gốc bị mờ và tạo pixel ở kích thước phông chữ lớn hơn.

Kết thúc

Trước khi có phông chữ màu, khả năng sáng tạo kiểu chữ trên web chỉ giới hạn ở việc áp dụng các nét vẽ hoặc tô màu chuyển sắc với CSS. Bạn luôn có thể làm điều gì đó tùy chỉnh hơn với hình ảnh vectơ, nhưng đó không phải là văn bản thực - nó không thể được người dùng chọn và sao chép vào khay nhớ tạm, không thể tìm kiếm nó trên trang có Lệnh+F, nó không được đọc bởi trình đọc màn hình hoặc công cụ tìm kiếm và bạn cần phải mở Adobe Illustrator chỉ để chỉnh sửa bản sao.

Phông chữ màu có khả năng thực sự thu hút sự chú ý của người dùng, khiến chúng trở nên hoàn hảo cho các trang đích và biểu ngữ. Chúng có thể không phải là thứ mà bạn tìm đến thường xuyên, nhưng chúng hứa hẹn những khả năng sáng tạo và biểu cảm mới cho thiết kế web có thể làm cho trang web của bạn nổi bật.