Kompaktowe, łatwe do kompresji czcionki kolorowe wektorowe ze wszystkimi Twoimi ulubionymi smaki gradientu.
W Chrome 98 zespoły Chrome i Fonts dodały obsługę COLRv1, ewolucja formatu czcionek COLRv0, której celem jest upowszechnianie czcionek kolorowych dodawanie gradientów, komponowanie i mieszanie, lepsze ponowne wykorzystywanie kształtów wewnętrznych. aby pliki czcionek były wyraźne i zwarte, a dobrze się skompresują.
Pokoloruj teraz
W witrynach tekst jest zwykle rysowany w kolorze określonym w CSS. Czcionka
nie mają zdefiniowanego konkretnego koloru, a jedynie wskazuje rozmieszczenie pikseli.
umieszczonego tekstu. Zwykle to wystarczy. CSS pozwala autorowi
elastycznie wybierać
koloru. Czasami jednak glif zawiera wiele kolorów, które są razem
znaczenie. Na przykład ta flaga 
z jasnoniebieskimi, różowymi i białymi paskami nie będzie
mają takie samo znaczenie, jeśli zostały po prostu narysowane w bieżącym kolorze tekstu.
Obecnie dla większości użytkowników jedynymi widocznymi kolorami są emotikony. Emotikony
zwykle pojawiają się w internecie za pomocą czcionki systemowej emotikonów lub przez wstawienie obrazów
(który ma własne widżety: 
). Duży plik
zwłaszcza dla czcionek opartych na bitmapach, sprawiając, że korzystanie z
czcionki emotikonów. Mamy nadzieję, że wspierając standard COLRv1,
czcionkę koloru kreacji w internecie i innych miejscach.
Pokaż mi swoje kolory
Przygotowaliśmy kilka przykładów:
Przykładowe zasoby z Google Fonts użyte w tym przykładzie są dostępne Internetowy interfejs API Google Fonts. Są nie figuruje w katalogu pod adresem fonts.google.com jako działają tylko w Chrome 98 lub nowszej wersji i pokazują prace eksperymentalne.
Teraz możesz tworzyć własne czcionki COLRv1, korzystając z bezpłatnych narzędzi typu open source. Sprawdź kompilator czcionek nanoemoji co pozwala utworzyć czcionki COLRv1 na podstawie obrazów źródłowych SVG, a następnie wypróbować je Chrome 98 lub nowsza. Stwórz własną naturę Bungee Spice, zmieniając kolorów gradientu za pomocą tymi instrukcjami.
Możesz na przykład zmodyfikować czcionkę Bungee Spice, aby dodać niebieski i czerwony gradient w ten sposób:
Opublikuj tweeta na koncie @googlefonts 🙂 Może wypróbuj gradient promieniowy lub zwykły?
Nowości w COLRv1
Format czcionki obsługuje wiele sposobów obsługi kolorów, z których każdy kompromisów, ale żadne z nich nie osiągnęło jeszcze sukcesu w internecie. (Aby dowiedzieć się więcej na temat kompromisów, obejrzyj prelekcję konferencyjną poświęconą konferencji BlinkOn 15 Dominika). Chrome 98 obsługuje standard COLRv1, ewolucję modelu COLRv0. Mamy nadzieję, że Dzięki połączeniu możliwości graficznych i kompaktowych plików w COLRv1 stanowi dobry wybór w przypadku wielu czcionek kolorów. COLRv1 dodaje gradienty, komponowania i mieszania oraz poprawia jakość ponowne wykorzystanie kształtu wewnętrznego w celu uzyskania jeszcze bardziej kompaktowych plików.
COLRv1 ma zdolność ekspresji mniej więcej równą Reklama natywna SVG plus dopasowywanie i komponowanie dodane do góry. Są 4 rodzaje wypełnienia kolorami: jednolite kolory, gradienty liniowe i promieniowe. i gradientów/stożkowych. COLRv1 umożliwia zmianę położenia i przekształcenie elementów glifów z pełnym zestawem opcji tłumaczenia, obracania, przesuwania i skalowania. przekształcenia danych. Ponadto zapewnia obsługę różnych odmian i ponownego użycia czcionek. z istniejących formatów definicji kształtów za pomocą czcionki.
Weźmy na przykład emotikon w kształcie szklanej kuli: podświetlenia w kształcie gwiazdy są ten sam kształt, ale różne rozmiary, co oznacza, że tylko jeden kształt może można zmienić położenie i użyć ponownie bez duplikowania treści w pliku. Format pozwala aby ponownie użyć pełnego glifu w nowym glifie, bez konieczności wykonywania przydatnych zadań. zakodować te same kształty dla każdego glifu. Wyobraź sobie kolorową czcionkę dekoracyjną z dekoracje kwiatowe, w tym te same kształty kwiatów na różnych literach. odwołując się do istniejących glifów kolorów. Na potrzeby przypadku użycia czcionki internetowej: COLRv1 mocno skompresuje się pod woff2. Możesz na przykład utworzyć testową kompilację Twemoji za pomocą modelu COLRv1. jest powiększony o około 1,2 MB, ale w formacie WOFF2 zajmuje około 0,6 MB. Kompilacja pełny zestaw glifów emotikonów Noto został zmniejszony z 9 MB dla wersji bitmapy do 1,85 MB. w postaci COLRv1+Woff2.
Przypadki użycia czcionek kolorowych
Chwytliwe nagłówki
Nowa czcionka w nowym kolorze sprawia, że wizualne wyróżnienia, nagłówki i banery wyglądają jeszcze lepiej na zewnątrz.
Koniec z zastępowaniem obrazów: czcionki emotikonów
Jeśli obsługujesz treści użytkowników, Twoi użytkownicy prawdopodobnie używają emotikonów. Dzisiaj bardzo powszechne jest skanowanie tekstu i zastępowanie emotikonów obrazami, zapewnić spójne renderowanie na wielu platformach oraz możliwość obsługi nowszych emotikony nie są obsługiwane przez system operacyjny. Następnie należy zmienić je z powrotem na tekst podczas obsługi schowka. Oto prawdziwy przykład:
Jeśli używasz czcionki z emotikonami, po prostu renderujesz tekst za pomocą tej czcionki:
<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>
Natomiast komponent reakcji emotikonem COLRv1 daje możliwość użycia kompaktowy plik czcionki zamiast katalogu komponentów z obrazem.
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
Dzięki kolorowym czcionkom, które zajmują mniej miejsca, mogą pojawiać się w tekście nowe formy ekspresji twórczej w sieci. W tym przykładzie arabskiej czcionki w stylu Kufi użyto gradientu kolorów jako artystyczna interpretacja tego, co można osiągnąć przy użyciu pisma odręcznego tradycyjnej kaligrafii w stylu Kufi pochodzącego od arabskiego nie była napisana stalą i atramentem, lecz wykuta w kamieniu.
Wykrywanie cech
Sprawdzanie, czy przeglądarka obsługuje dany kolor jest możliwe dzięki sniffingowi klienta użytkownika lub wyszukiwaniu np. ChromaCheck, @PixelAmbacht, aby przetestować renderowanie koloru glify w Canvas. Oba rozwiązania nie są optymalne. Testowanie funkcji powinno wykryć za pomocą którejś z konkretnych funkcji i unikaj przechwytywania klienta. Sprawdzanie kolorów nie powinna wykonywać operacji na kanwie 2D wymagających dużych ilości zasobów i określania wsparcia.
Zespół Chrome chce to poprawić i rozpoczął serię dyskusji [1 2] w grupie roboczej ds. usług porównywania cen do dostarczania informacji na temat obsługi czcionek w przeglądarkach w językach JavaScript oraz deklaratywnie w CSS. Zespół planuje udostępnić skuteczne wykrywanie funkcji w kolorów i innych technologii czcionek, w przyszłej wersji Chrome.
Jeśli chcesz używać czcionek kolorów w projekcie teraz, gdy COLRv1 pomoc jest ograniczona do Chrome. Możesz to zrobić na 2 sposoby: dla czcionki COLRv1, która zawiera też glify monochromatyczne. Klienty użytkownika, jeśli nie obsługują COLRv1, przełączają się na renderowanie monochromatyczne. glify. Możesz też użyć biblioteki ChromaCheck lub klienta użytkownika nasłuchiwanie w celu określenia, czy jest dostępna obsługa COLRv1. Następnie dostarczasz usługę porównywania cen który wczytuje czcionki COLRv1 w obsługiwanych klientach użytkownika i używa czcionki alternatywnej takich jak COLRv0, bitmapa czcionki czy SVG w innych przeglądarkach.
Obsługa palety czcionek CSS
Byłoby niezwykle przydatne, gdyby użycie innego zestawu kolorów nie pozwoliłoby wymagają nowej czcionki. Na szczęście istnieje mechanizm: font-palette CSS. Zespół Chrome pracuje nad dodaniem obsługę palety czcionek w Chrome.
COLRv1 Ty
Jeśli czcionka COLRv1 wzbudza Twoje zainteresowanie, zapytaj dostawcę czcionki o kolor COLRv1 do wykorzystania w projekcie, wypróbuj przykłady i wersje demonstracyjne powyżej, albo możesz od razu poeksperymentować z tworzyć własny?
Jeśli chcesz podzielić się opinią na temat COLRv1 w Chrome, napisz na lista adresowa blink-dev, lub zgłoś problem w naszym narzędziu do śledzenia problemów. Jeśli chcesz przekazać nam swoją opinię, na samym formacie czcionki COLRv1, zgłoś problem na stronie Repozytorium GitHub specyfikacji COLRv1.
W Chrome 98 z radością pokazujemy, jak COLRv1 zapewnia zupełnie nowy poziom kreatywność typograficzną w internecie.
Więcej informacji
Jeśli chcesz dowiedzieć się więcej, mamy dla Ciebie kilka dodatkowych materiałów:
Aby dowiedzieć się, jak działa COLRv1 i w jaki sposób jest on wdrażany w Chrome, warto obejrzeć prezentację firmy Dominik – BlinkOn 15.
- Międzynarodowa konferencja Unicode 45: czcionki w kolorach wektorowych, wypowiedź Rodericka Sheeter, Peter Constable i Dominik Röttsches (film, szczegóły rozmowy)
- kompilatora czcionek nanoemoji, Czcionki COLRv1 z obrazów SVG
- Google Fonts repozytorium color-fonts na GitHubie zawierające aktualne wersje emotikonów Noto, Twemoji i innych przykładowych czcionek.
- Prezentacja czcionki Bradley Initials w wykonaniu DJR przedstawiającego COLRv1
- narzędzia i biblioteki ChromaCheck, dostępne technologie wykrywania czcionek kolorów
Podziękowania
Podziękowania dla: Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner i Werner Lemberg, Dave Crossland, Władimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens i innych za ich wkład w projekt COLRv1.