Kompaktowe, skompresowane, kolorowe czcionki wektorowe z wszystkimi ulubionymi gradientami.
W Chrome 98 zespoły Chrome i Fonts dodały obsługę COLRv1, która jest ewolucją formatu czcionek COLRv0. Ma on na celu upowszechnienie czcionek kolorowych poprzez dodanie gradientów, kompozytowania i mieszania oraz ulepszonego ponownego używania kształtów wewnętrznych. Dzięki temu pliki czcionek są wyraźne i kompaktowe, a także dobrze się kompresują.
Kolor teraz
W internecie tekst jest zwykle wyświetlany w kolorze określonym w kodzie CSS. Nie określa ona żadnego konkretnego koloru, tylko wskazuje, gdzie powinny znajdować się piksele. To zwykle dobra rzecz. CSS umożliwia autorowi elastyczne wybieranie koloru. Czasami jednak zawiera on kilka kolorów, które razem mają znaczenie. Na przykład ten 
flaga z paskami w kolorze jasnoniebieskim, różowym i białym nie przekaza tego samego znaczenia, jeśli zostanie narysowana w bieżącym kolorze tekstu.
Obecnie dla większości użytkowników emotikony są jedynymi kolorowymi czcionkami. Emotikony są zwykle wyświetlane w internecie za pomocą czcionki emotikonów systemu lub przez wstawianie obrazów (co wiąże się z pewnymi komplikacjami, 
). Duże rozmiary plików, zwłaszcza w przypadku czcionek kolorowych opartych na bitmapach, utrudniają używanie czcionek internetowych do emotikonów. Mamy nadzieję, że dzięki obsłudze COLRv1 czcionki kolorowe będą szerzej wykorzystywane w internecie i poza nim.
Pokaż swoje kolory
Utworzyliśmy kilka przykładów, z których możesz korzystać:
Przykładowe zasoby z Google Fonts użyte w tym przykładzie są dostępne w interfejsie Google Fonts Web API. Nie są one wymienione w katalogu fonts.google.com, ponieważ działają tylko w Chrome 98 lub nowszej wersji i są przykładem eksperymentalnej pracy.
Teraz możesz tworzyć własne czcionki COLRv1 za pomocą bezpłatnych narzędzi open source. Zapoznaj się z kompilatorem czcionek nanoemoji, który umożliwia tworzenie czcionek COLRv1 na podstawie obrazów źródłowych SVG. Następnie wypróbuj je w Chrome 98 lub nowszej. Spróbuj nadać własnego charakteru motywowi Bungee Spice, zmieniając kolory gradientu za pomocą tych instrukcji.
Możesz na przykład zmodyfikować czcionkę Bungee Spice, aby miała gradient w kolorach niebieskim i czerwonym:
Udostępnij wyniki w tweetach na koncie @googlefonts. 🙂 Możesz też spróbować gradientu promieniowego lub skumulowanego.
Nowość w COLRv1
Format czcionek obsługuje wiele sposobów obsługi kolorów, z różnymi kompromisami, ale żaden z nich nie sprawdził się do tej pory w internecie. (Aby dowiedzieć się więcej o kompromisach, zapoznaj się z wykładem Dominika z konferencji BlinkOn 15). Chrome 98 obsługuje COLRv1, który jest ewolucją COLRv0. Mamy nadzieję, że połączenie możliwości graficznych i kompaktowych plików w COLRv1 sprawi, że będzie to dobry wybór w wielu zastosowaniach kolorowych czcionek. COLRv1 dodaje gradienty, kompozycję i mieszanie oraz ulepsza ponowne wykorzystanie kształtów wewnętrznych, aby jeszcze bardziej skompresować pliki.
COLRv1 ma możliwości porównywalne z SVG Native, a dodatkowo dodano do niego blendowanie i kompozytowanie. Istnieją 4 typy wypełnienia kolorem: jednolite kolory, gradienty liniowe, gradienty promieniowe i gradienty styczne. COLRv1 umożliwia zmianę położenia i przekształcenie elementów glifów za pomocą pełnego zestawu przekształceń przesunięcia, obrotu, skręcenia i skalowania. Dodatkowo obsługuje ona różne czcionki i ponowne używanie istniejących formatów definicji kształtów w czcionce.
Weźmy na przykład emotikon kryształowej kuli: wyróżnienia w kształcie gwiazd mają ten sam kształt, ale różne rozmiary, co oznacza, że w pliku można przemieścić i ponownie użyć tylko jednego kształtu. Format ten umożliwia ponowne użycie całego glifu w nowym glifie bez konieczności nadmiernego kodowania tych samych kształtów. Wyobraź sobie ozdobne czcionki kolorowe z ozdobami kwiatowymi, w których te same kształty kwiatów są umieszczane na różnych literach, po prostu odwołując się do istniejących kolorowych glif. W przypadku czcionek internetowych COLRv1 dobrze się kompresuje w formacie woff2. Na przykład testowa wersja Twemoji korzystająca z COLRv1 zajmuje po rozszerzeniu około 1,2 MB, ale w formie woff2 zajmuje około 0,6 MB. Wersja kompilowana pełnego zestawu glifów Noto Emoji została zmniejszona z 9 MB w przypadku wersji bitmapowej do 1,85 MB w formie COLRv1+woff2.
Zastosowania kolorowej czcionki
Chwytliwe nagłówki
Odświeżająca kolorowa czcionka sprawi, że wyróżnienia, nagłówki i banery będą się wyróżniać.
Zastąpienie obrazów czcionkami emotikonów
Jeśli obsługujesz treści użytkowników, prawdopodobnie Twoi użytkownicy używają emotikonów. Obecnie bardzo często skanuje się tekst i zastępuje dowolne emotikony obrazami, aby zapewnić spójne renderowanie na różnych platformach oraz obsługę nowszych emotikonów niż te obsługiwane przez system operacyjny. Następnie podczas operacji na schowku te obrazy trzeba zmienić z powrotem na tekst. Oto przykład:
Jeśli masz czcionkę emotikonów, po prostu renderuj tekst w tej czcionce:
<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>
Podobnie w przypadku komponentu reakcji emotikonów COLRv1 umożliwia użycie kompaktowego pliku czcionek zamiast katalogu zasobów obrazów.
Wyobraź sobie, ile obrazów trzeba by pobrać, aby mieć pełny selektor emotikonów.
Kolor w czcionkach ikon
Użycie koloru w czcionkach ikonowych zwiększa czytelność i ułatwia zrozumienie znaków.
Wyrażenie artystyczne
Kolorowe czcionki, które nie zajmują dużo miejsca, umożliwiają nowe formy ekspresji artystycznej w tekście w internecie. Ten przykład arabskiej czcionki w stylu kufi wykorzystuje gradienty kolorów jako artystyczną interpretację tego, jak wygląda płynący tusz w tradycyjnej kaligrafii, gdy zastosuje się go w stylu kufi. Styl ten wywodzi się z tego, że nie pisze się za pomocą pióra i tuszu, ale wycina się w kamieniu.
Wykrywanie cech
Obecnie można sprawdzić, czy silnik przeglądarki obsługuje określony format kolorów czcionki, za pomocą sniffera klienta użytkownika lub wyszukiwania w bibliotece, takiej jak ChromaCheck autorstwa @PixelAmbacht, aby przetestować renderowanie kolorowych glif na Canvas. Oba rozwiązania nie są optymalne. Testowanie funkcji powinno wykrywać tylko konkretną funkcję, a nie wykorzystywać wykrywania klienta. Biblioteka ChromaCheck nie powinna wykonywać operacji na płótnie 2D wymagających dużych zasobów, aby określić obsługę.
Zespół Chrome chce to zmienić i rozpoczął serię dyskusji w grupie roboczej CSS, aby przekazać informacje o obsługiwaniu technologii czcionek w przeglądarce w JavaScript i deklaratywnie w CSS. W przyszłej wersji Chrome zespół planuje wdrożyć skuteczne wykrywanie funkcji w przypadku czcionek kolorowych i innych technologii czcionek.
Jeśli chcesz już teraz używać w projekcie czcionek kolorowych, gdy obsługa COLRv1 jest ograniczona do Chrome, możesz to zrobić na 2 sposoby: poproś dostawcę czcionek o czcionkę COLRv1, która zawiera też znaki monochromatyczne. Aplikacje, które nie obsługują COLRv1, będą renderować monochromatyczne glify. Możesz też użyć biblioteki ChromaCheck lub sniffera user agent, aby sprawdzić, czy obsługa COLRv1 jest dostępna. Następnie przesyłasz kod CSS, który wczytuje czcionki COLRv1 w obsługiwanych przez użytkownika agentach użytkownika, a w innych przeglądarkach używa czcionek w formacie alternatywnym, np. COLRv0, czcionek bitmapowych lub czcionek OpenType SVG.
Obsługa palety czcionek CSS
Bardzo przydatne byłoby, gdyby użycie innego zestawu kolorów nie wymagało użycia nowego czcionki. Na szczęście istnieje mechanizm, który to umożliwia: właściwość CSS font-palette. Zespół Chrome pracuje nad dodaniem obsługi palety czcionek w Chrome.
Czcionki COLRv1 i Ty
Jeśli fonty COLRv1 wzbudzają Twoje zainteresowanie, poproś dostawcę czcionek o czcionkę kolorową COLRv1 do użycia w projekcie. Możesz też skorzystać z przykładów i demonstracji podanych powyżej lub spróbować stworzyć własną.
Jeśli chcesz podzielić się opinią na temat COLRv1 w Chrome, opublikuj ją na liście mailingowej blink-dev lub zgłosić problem w naszym systemie śledzenia błędów. Jeśli chcesz przekazać opinię na temat formatu czcionek COLRv1, zgłoś problem w repozytorium GitHub ze specyfikacją COLRv1.
W Chrome 98 wprowadzamy COLRv1, który wprowadza do sieci zupełnie nowy poziom kreatywności typograficznej.
Więcej informacji
Jeśli chcesz dowiedzieć się więcej, zapoznaj się z tymi materiałami:
Aby dowiedzieć się, jak działa COLRv1 i jak jest ono wdrażane w Chrome, obejrzyj wykład Dominika z konferencji BlinkOn 15.
- Międzynarodowa konferencja Unicode #45: czcionki wektorowe w kolorze, wykład Rodericka Sheetera, Petera Constable’a i Dominika Röttschesa (wideo, szczegóły wykładu).
- kompilator czcionek nanoemoji, który generuje czcionki COLRv1 na podstawie obrazów SVG.
- Repozytorium Google Fonts na GitHubie zawierające aktualne wersje Noto Emoji, Twemoji i innych przykładowych czcionek
- Prezentacja przez DJR czcionki Bradley Initials, która wykorzystuje COLRv1
- Narzędzie i biblioteka ChromaCheck do wykrywania dostępnych technologii czcionek kolorowych.
Podziękowania
Dziękujemy Behdadowi Esfahbodowi, Cosimo Lupo, Peterowi Constable’owi, Benowi Wagnerowi, Wernerowi Lembergowi, Dave’owi Crosslandowi, Vladimirowi Levantovskiemu, Jonathanowi Kewowi, Laurence’owi Penney’owi, Chrisowi Lilley’owi, Davidowi Jonathanowi Rossowi, Underware, Just van Rossumowi, Roelowi Nieskensowi i innym za wkład w COLRv1.