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. Rodzaj czcionki nie definiuje żadnego konkretnego koloru, tylko wskazuje, gdzie powinny znajdować się piksele. Zwykle to wystarczy. CSS pozwala autorowi
elastycznie wybrać kolor. Czasami jednak glif zawiera kilka kolorów, które razem mają znaczenie. Na przykład flaga 
z paskami w kolorze jasnoniebieskim, różowym i białym nie przekazałaby tego samego znaczenia, gdyby została narysowana w bieżącym kolorze tekstu.
Obecnie dla większości użytkowników emotikony są jedynymi kolorowymi czcionkami. Emotikony pojawiają się w internecie zazwyczaj 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 ma ich w katalogu pod adresem fonts.google.com, ponieważ działają one tylko w Chrome 98 lub nowszej i prezentują prace eksperymentalne.
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, a następnie wypróbuj je w przeglądarce 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 skręconego.
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, obejrzyj prezentację konferencyjną firmy Dominik „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 zoptymalizować rozmiar plików.
COLRv1 ma możliwości porównywalne z SVG Native, a dodatkowo dodano do niego blendowanie i kompozycję. 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. Obsługuje też różne czcionki i ponowne użycie 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 bez jego powielania. Format ten pozwala ponownie wykorzystać pełny glif w obrębie nowego glifu bez konieczności zbędnego kodowania tych samych kształtów dla każdego glifu. Wyobraź sobie kolorową czcionkę z ozdobami kwiatowymi, w której te same kształty kwiatów są umieszczane na różnych literach, tylko przez odniesienie do istniejących kolorowych glifów. 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 (wersja bitmapowa) do 1,85 MB w formie COLRv1+woff2.
Zastosowania kolorowej czcionki
chwytliwe nagłówki;
Odświeżający kolor czcionki sprawi, że wyróżnienia, nagłówki i banery będą się wyróżniać.
Koniec z zastępowaniem obrazów: czcionki emotikonów
Jeśli obsługujesz treści użytkowników, prawdopodobnie używają oni 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 komponencie reakcji emotikonów COLRv1 umożliwia użycie kompaktowego pliku czcionek zamiast katalogu zasobów graficznych.
Wyobraź sobie, ile obrazów musisz pobrać, żeby uzyskać kompletny selektor emotikonów.
Kolory czcionek ikon
Używanie kolorów w czcionkach ikon zwiększa ich czytelność i ułatwia zrozumienie glifów.
Ekspresja artystyczna
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 może wyglądać przepływ atramentu tradycyjnej kaligrafii po zastosowaniu w stylu arabskim kaligrafii Kufi, wywodzącej się z tego, że nie stworzono z użyciem stalówki i atramentu, lecz wyrzeźbiono 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 kanwach 2D, które wymagają wielu zasobów, aby określić poziom wsparcia.
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 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.