Kompaktowe, łatwe do kompresji, kolorowe czcionki wektorowe ze wszystkimi ulubionymi rodzajami gradientu.
W Chrome 98 zespoły Chrome i Fonts dodały obsługę COLRv1, ewolucji formatu czcionek COLRv0, która ma na celu powszechne rozpowszechnienie czcionek kolorów dzięki dodaniu gradientów, komponowania i mieszania. Ulepszyliśmy też ponowne wykorzystywanie kształtów wewnętrznych w celu uzyskania wyraźnych i kompaktowych plików czcionek.
Koloruj teraz
W internecie tekst jest zwykle rysowany w kolorze określonym w CSS. Czcionka nie określa żadnego konkretnego koloru, a jedynie wskazuje, gdzie należy umieścić piksele. To zwykle jest dobre rozwiązanie. CSS umożliwia autorowi
elastyczne wybieranie koloru. Czasami glify zawierają wiele kolorów, które razem mają znaczenie. Na przykład flaga 
z pasami w kolorze jasnoniebieskim, różowym i białym nie oddaje tego samego znaczenia, jeśli zostałaby narysowana w bieżącym kolorze tekstu.
Obecnie dla większości użytkowników emotikony są jedynymi wyświetlanymi czcionkami w różnych kolorach. Emotikony pojawiają się w internecie za pomocą systemowej czcionki emotikonów lub wstawiania obrazów (mających własne widżety 
). Duże pliki, przeznaczone specjalnie dla kolorowych czcionek bazujących na bitmapach, utrudniają używanie czcionek internetowych jako emotikonów. Dzięki obsłudze COLRv1 mamy nadzieję, że w internecie i nie tylko zwiększy się liczba kreatywnych czcionek w różnych kolorach.
Pokaż mi Twoje kolory
Opracowaliśmy kilka przykładów, które możesz wypróbować:
Przykładowe zasoby z Google Fonts użyte w przykładzie są dostępne w interfejsie internetowym Google Fonts. Nie są one wymienione w katalogu fonts.google.com, ponieważ działają tylko w Chrome 98 lub nowszej wersji i przedstawiają prace eksperymentalne.
Teraz możesz tworzyć własne czcionki COLRv1 za pomocą bezpłatnych narzędzi typu open source. Zapoznaj się z kompilatorem czcionek nanoemoji, który pozwala tworzyć czcionki COLRv1 na podstawie obrazów źródłowych SVG, a następnie wypróbować je w Chrome 98 i nowszych wersjach. Spróbuj stworzyć własną odmianę w stylu Bungee Spice, zmieniając kolory gradientu według tych instrukcji.
Można na przykład zmodyfikować czcionkę Bungee Spice, aby dodać niebieski i czerwony gradient w ten sposób:
Opublikuj wyniki na Twitterze @googlefonts 🙂 A może wypróbujesz gradient promieniowy lub gradientowy?
Nowość w COLRv1
Format czcionki obsługuje wiele sposobów obsługi koloru, co wiąże się z różnymi wadami, ale jak dotąd żaden z nich nie był skuteczny w internecie. (Aby dowiedzieć się więcej o zaletach, obejrzyj prezentację konferencyjną Dominika BlinkOn 15). Chrome 98 obsługuje COLRv1, nową wersję COLRv0. Mamy nadzieję, że połączenie możliwości graficznych i kompaktowych plików COLRv1 będzie dobrym rozwiązaniem w przypadku wielu kolorów czcionek. COLRv1 dodaje gradienty, komponowanie i mieszanie oraz usprawnia ponowne wykorzystywanie kształtów wewnętrznych, dzięki czemu pliki są jeszcze bardziej kompaktowe.
COLRv1 ma opcje ekspresji, które w przybliżeniu mają możliwości natywne w SVG oraz dodane do niej mieszanie i komponowanie. Istnieją 4 typy wypełnienia kolorem: jednolite kolory, gradienty liniowe, gradientowe promieniowe i gradientowe/stożkowe. COLRv1 umożliwia zmianę położenia i przekształcanie elementów glify za pomocą pełnego zestawu transformacji, obracania, przesunięcia i skalowania. Dodatkowo obsługuje ona różne wersje czcionek i wykorzystuje w czcionce istniejące formaty definicji kształtu.
Weźmy na przykład emotikon kryształowej kuli: wyróżnienia w kształcie gwiazdy mają ten sam kształt, ale różne rozmiary. Oznacza to, że tylko 1 kształt można zmienić w pliku bez jego powielania. Format ten umożliwia ponowne wykorzystanie pełnego glifu w nowym glifie bez konieczności nadmiarowego kodowania tych samych kształtów dla każdego z nich. Weźmy na przykład ozdobną czcionkę z dekoracjami kwiatowymi, w której te same kształty kwiatów są umieszczone na różnych literach, odwołując się tylko do istniejących glifów kolorów. W przypadku użycia czcionki internetowej COLRv1 dobrze kompresuje się w standardzie Woff2. Na przykład kompilacja testowa Twemoji wykorzystującej COLRv1 zajmuje około 1,2 MB, ale w wersji woff2 – 0,6 MB. Kompilacja pełnego zestawu emotikonów Noto zmniejszono z 9 MB dla wersji bitmapy do 1,85 MB w formacie COLRv1+Woff2.
Przypadki użycia czcionek kolorowych
Ciekawe nagłówki
Nowa czcionka w nowym kolorze pozwala wyróżnić elementy wizualne, nagłówki i banery.
Koniec z zastępowaniem obrazów: czcionki emotikonów
Jeśli popierasz treści użytkowników, prawdopodobnie korzystają oni z emotikonów. Obecnie bardzo powszechne jest skanowanie tekstu i zastępowanie emotikonów napotkanych obrazami, aby zapewnić spójne renderowanie na wielu platformach i obsługę nowych emotikonów obsługiwanych przez system operacyjny. Podczas korzystania ze schowka trzeba je przełączyć z powrotem na tekst. Oto rzeczywisty przykład:
Jeśli korzystasz z czcionki emotikonów, tylko renderujesz tekst za pomocą tej czcionki w ten sposób:
<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 emotikonem COLRv1 umożliwia użycie kompaktowego pliku czcionek zamiast katalogu zasobów graficznych.
Wyobraź sobie, ile zdjęć trzeba by pobrać, aby selektor emotikonów był kompletne.
Kolor w czcionkach ikon
Użycie kolorów w czcionkach ikon zwiększa ich przejrzystość i sprawia, że glify są bardziej czytelne.
Ekspresja artystyczna
Zajmujące mniej miejsca czcionki kolorystyczne, które tworzą nowe formy ekspresji artystycznej w tekście w internecie. W tym przykładzie arabskiej czcionki w stylu Kufi użyto gradientów kolorów, aby pokazać, jak może wyglądać przepływ atramentu w tradycyjnej kaligrafii po zastosowaniu arabskiego stylu kufi, który wywodzi się z pisania wykutego w kamieniu stalówką i atramentem.
Wykrywanie funkcji
Obecnie sprawdzenie, czy przeglądarka przeglądarki obsługuje konkretny format czcionki, można ustalić za pomocą wykrywania klientów użytkownika lub przez wyszukiwanie w bibliotece, takiej jak ChromaCheck przez @PixelAmbacht, w celu przetestowania renderowania glifów kolorów w Canvas. Oba rozwiązania nie są optymalne. Testy funkcji powinny wykrywać samą konkretną funkcję i unikać wychwytywania klientów użytkownika. Aby uzyskać pomoc, biblioteka ChromaCheck nie powinna wykonywać operacji na kanwie 2D, które pochłaniają dużo zasobów.
Zespół Chrome chce to udoskonalić i rozpoczął serię dyskusji w grupie roboczej ds. usług porównywania cen [1, 2], aby przekazać informacje na temat obsługi technologii czcionek przeglądarki w języku JavaScript i deklaratywnie w CSS. W przyszłej wersji Chrome zespół zamierza udostępnić efektywne wykrywanie funkcji związanych z kolorami i innymi technologiami czcionek.
Jeśli chcesz od razu używać w projekcie czcionek kolorowych, gdy obsługa COLRv1 jest ograniczona tylko do Chrome, możesz to zrobić na 2 sposoby: poproś dostawcę czcionki o czcionek COLRv1, która zawiera też glify monochromatyczne. Klienty użytkownika, które nie obsługują COLRv1, wracają do renderowania glifów monochromatycznych. Aby określić, czy obsługa COLRv1 jest dostępna, możesz też użyć biblioteki ChromaCheck lub wykrywania klientów użytkownika. Następnie dostarczasz CSS, który wczytuje czcionki COLRv1 w obsługiwanych klientach użytkownika, i używasz alternatywnego formatu czcionki, np. COLRv0, formatu czcionki bitmapy lub OpenType SVG w innych przeglądarkach.
Obsługa palety czcionek CSS
Byłoby niezwykle przydatne, jeśli użycie innego zestawu kolorów nie wymaga nowej czcionki. Na szczęście istnieje mechanizm: właściwość CSS-palette. Zespół Chrome pracuje nad dodaniem obsługi palety czcionek w Chrome.
COLRv1 a Ty
Jeśli czcionki COLRv1 wzbudzają Twoje zainteresowanie, zapytaj dostawcę czcionek o kolorową czcionkę COLRv1, której możesz użyć w swoim projekcie. Możesz też skorzystać z przykładów i prezentacji powyżej. Możesz też od razu poeksperymentować i utworzyć własną czcionkę.
Jeśli chcesz podzielić się opinią na temat COLRv1 w Chrome, opublikuj ją na liście adresowej blink-dev lub zgłoś problem w naszym narzędziu do śledzenia problemów. Jeśli chcesz wyrazić opinię na temat formatu czcionki COLRv1, zgłoś problem w repozytorium GitHub specyfikacji COLRv1.
Dzięki Chrome 98 z przyjemnością obserwujemy, jak COLRv1 wnosi do internetu zupełnie nowy poziom typograficznej kreatywności.
Więcej informacji
Jeśli chcesz dowiedzieć się więcej, skorzystaj z tych materiałów:
Aby dowiedzieć się, jak działa COLRv1 i jak wdrożyć ją w Chrome, obejrzyj prezentację konferencyjną Dominika BlinkOn 15.
- Międzynarodowa konferencja Unicode nr 45: Vector Color Fonts (Czcionki wektorowe w kolorach) – prelekcja: Roderick Sheeter, Peter Constable i Dominik Röttsches (film, szczegóły rozmowy)
- kompilator czcionek nanoemoji, który tworzy czcionki COLRv1 z obrazów SVG
- Repozytorium color-fonts na GitHubie Google Fonts, które zawiera bieżące kompilacje emotikonów Noto, Twemoji i innych przykładowych czcionek;
- Prezentacja czcionki Bradley Initials przez DJR i COLRv1
- narzędzie i biblioteka ChromaCheck do wykrywania dostępnych technologii kolorów czcionek,
Podziękowania
Dziękujemy