Compacte, compressievriendelijke vectorkleurenlettertypen met al uw favoriete verloopsmaken.
In Chrome 98 hebben de Chrome- en Fonts-teams ondersteuning toegevoegd voor COLRv1, een evolutie van het COLRv0-lettertypeformaat bedoeld om kleurlettertypen wijdverspreid te maken door het toevoegen van verlopen, composities en overvloeiingen, en verbeterd intern hergebruik van vormen voor scherpe en compacte lettertypebestanden die goed worden gecomprimeerd .
Kleur nu
Op internet wordt tekst doorgaans getekend in een kleur die is opgegeven in CSS. Het lettertype definieert geen specifieke kleur, het geeft alleen aan waar pixels moeten worden geplaatst. Dat is meestal een goede zaak. Met CSS kan de auteur flexibel een kleur kiezen. Soms bevat een glyph echter meerdere kleuren die samen een betekenis hebben. Deze vlag bijvoorbeeld 
met lichtblauwe, roze en witte strepen zou niet dezelfde betekenis overbrengen als het eenvoudigweg in de huidige tekstkleur was getekend.
Tegenwoordig zijn emoji's voor de meeste gebruikers de enige kleurlettertypen die ze zien. Emoji's verschijnen doorgaans op internet via het emoji-lettertype van het systeem, of door afbeeldingen in te voegen (wat zijn eigen complicaties heeft, 
). Grote bestandsgroottes, vooral voor op bitmaps gebaseerde kleurlettertypen, hebben het moeilijk gemaakt om weblettertypen voor emoji te gebruiken. Door COLRv1 te ondersteunen hopen we op een toename van het creatieve gebruik van kleurlettertypen op internet en daarbuiten.
Laat me je kleuren zien
We hebben een aantal voorbeelden voor je gemaakt om mee te spelen:
De voorbeelditems van Google Fonts die in het voorbeeld worden gebruikt, zijn live in de web-API van Google Fonts . Ze worden niet vermeld in de map op fonts.google.com, omdat ze alleen werken op Chrome 98 of hoger en experimenteel werk demonstreren.
U kunt nu uw eigen COLRv1-lettertypen maken met behulp van gratis en open source-tools. Bekijk de nanoemoji-lettertypecompiler waarmee u COLRv1-lettertypen kunt maken op basis van SVG-bronafbeeldingen en deze vervolgens kunt proberen in Chrome 98 of hoger. Probeer je eigen draai te geven aan Bungee Spice door de verloopkleuren te veranderen met behulp van deze instructies .
U kunt bijvoorbeeld het Bungee Spice-lettertype wijzigen zodat het een blauw en rood verloop krijgt, zoals dit:
Tweet je resultaten naar @googlefonts 🙂 Waarom probeer je niet een radiaal of vloeiend verloop?
Nieuw met COLRv1
Het lettertypeformaat ondersteunt meerdere manieren om kleur te ondersteunen, allemaal met verschillende afwegingen, maar tot nu toe is geen enkele succesvol gebleken op internet. (Voor meer informatie over de afwegingen, bekijk Dominik's BlinkOn 15 conferentietoespraak .) Chrome 98 biedt ondersteuning voor COLRv1, een evolutie van COLRv0. We hopen dat de combinatie van grafische mogelijkheden en compacte bestanden van COLRv1 het een goede keuze zal maken voor veel toepassingen van kleurlettertypen. COLRv1 voegt verlopen, composities en overvloeiingen toe en verbetert het interne hergebruik van vormen om nog compactere bestanden te maken.
COLRv1 heeft expressieve mogelijkheden die ongeveer gelijk zijn aan SVG Native, plus blending en compositing daarbovenop. Er zijn vier soorten kleuropvullingen: effen kleuren, lineaire verlopen, radiale verlopen en sweep/conische verlopen. Met COLRv1 kunt u glyph-elementen verplaatsen en transformeren met behulp van een volledige set transformaties voor vertalen, roteren, schuintrekken en schalen. Bovendien biedt het ondersteuning voor lettertypevariaties en worden bestaande vormdefinitieformaten in het lettertype hergebruikt.
Denk bijvoorbeeld aan de kristallen bol-emoji: de stervormige highlights hebben dezelfde vorm, maar verschillende afmetingen, wat betekent dat slechts één vorm kan worden verplaatst en hergebruikt zonder duplicatie in het bestand. Dankzij het formaat kunt u een volledige glyph hergebruiken binnen een nieuwe glyph, zonder dat u voor elke glyph dezelfde vormen redundant hoeft te coderen. Stel je een decoratief kleurenlettertype voor met bloemdecoraties, waarbij dezelfde bloemvormen op verschillende letters worden geplaatst door simpelweg te verwijzen naar bestaande kleurtekens. Voor het gebruik van weblettertypen comprimeert COLRv1 goed onder woff2. Een testbuild van Twemoji met COLRv1 neemt bijvoorbeeld opgeblazen ongeveer 1,2 MB in beslag, maar is in woff2-vorm ongeveer 0,6 MB. Een build van de volledige Noto Emoji Glyph-set is teruggebracht van 9 MB voor de bitmapversie naar 1,85 MB in COLRv1+woff2-vorm.
Gebruiksscenario's voor kleurlettertypen
Pakkende koppen
Een fris kleurenlettertype zorgt ervoor dat visuele hoogtepunten, koppen en banners er echt uitspringen.
Geen afbeeldingsvervanging meer: emoji-lettertypen
Als u door gebruikers gegenereerde inhoud ondersteunt, gebruiken uw gebruikers waarschijnlijk emoji's. Tegenwoordig is het heel gebruikelijk om tekst te scannen en elke emoji die je tegenkomt te vervangen door afbeeldingen om consistente weergave op meerdere platforms te garanderen en de mogelijkheid om nieuwere emoji's te ondersteunen dan het besturingssysteem ondersteunt. Die afbeeldingen moeten vervolgens tijdens klembordbewerkingen terug naar tekst worden geschakeld. Hier is een echt voorbeeld:
Als je een emoji-lettertype hebt, geef je de tekst gewoon in het lettertype weer, zoals dit:
<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>
Op dezelfde manier biedt COLRv1 in een emoji-reactiecomponent de mogelijkheid om een compact lettertypebestand te gebruiken in plaats van een catalogus met afbeeldingselementen.
Stel je voor hoeveel afbeeldingen je zou moeten ophalen voor een complete emoji-kiezer!
Kleur de pictogramlettertypen in
Het gebruik van kleur in pictogramlettertypen zorgt voor duidelijkheid en maakt glyphs gemakkelijker te begrijpen.
Artistieke expressie
Ruimtebesparende kleurlettertypen maken nieuwe vormen van artistieke expressie in tekst op internet mogelijk. Dit voorbeeld van een Arabisch lettertype in Kufi-stijl gebruikt kleurverlopen als een artistieke interpretatie van hoe de inktstroom van traditionele kalligrafie eruit zou kunnen zien wanneer toegepast op de Kufi-stijl van Arabisch schrift, die voortkomt uit het niet schrijven met penpunt en inkt, maar uitgesneden in steen.
Functiedetectie
Op dit moment is het mogelijk om uit te zoeken of een browserengine een specifiek kleurlettertypeformaat ondersteunt door middel van user-agent sniffing of door te zoeken in een bibliotheek zoals ChromaCheck van @PixelAmbacht om de weergave van kleurglyphs op Canvas te testen. Beide oplossingen zijn niet optimaal. Het testen van functies zou alleen een specifieke functie zelf moeten detecteren en snuffelen door user-agents moeten voorkomen. De ChromaCheck-bibliotheek hoeft geen resource-intensieve 2D-canvasbewerkingen uit te voeren om de ondersteuning te bepalen.
Het Chrome-team wil dat verbeteren en is een reeks discussies [ 1 , 2 ] in de CSS-werkgroep gestart om informatie te verstrekken over ondersteuning van browserlettertypetechnologie in JavaScript en declaratief in CSS. Het team is van plan om in een toekomstige versie van Chrome efficiënte functiedetectie voor kleurenlettertypen en andere lettertypetechnologieën uit te brengen.
Als u op dit moment kleurenlettertypen in uw project wilt gebruiken terwijl de ondersteuning van COLRv1 beperkt is tot Chrome, kunt u dat op twee manieren doen: Vraag uw lettertypeleverancier om een COLRv1-lettertype dat ook monochrome glyphs bevat. User agents die COLRv1 niet ondersteunen, zullen terugvallen op het weergeven van monochrome glyphs. Als alternatief kunt u de ChromaCheck-bibliotheek of user-agent sniffing gebruiken om te bepalen of COLRv1-ondersteuning beschikbaar is. Vervolgens levert u CSS aan die COLRv1-lettertypen laadt in ondersteunende user-agents en gebruikt u een alternatief lettertypeformaat zoals COLRv0, een bitmaplettertypeformaat of OpenType SVG in andere browsers.
Ondersteuning voor CSS-lettertypepaletten
Het zou enorm handig zijn als het gebruik van een andere set kleuren geen nieuw lettertype vereist. Gelukkig bestaat er een mechanisme: de CSS-eigenschap van het lettertypepalet . Het Chrome-team werkt aan het toevoegen van ondersteuning voor het lettertypepalet in Chrome .
COLRv1-lettertypen en jij
Als COLRv1-lettertypen uw interesse wekken, vraag dan uw lettertypeleverancier naar een COLRv1-kleurenlettertype dat u in uw project kunt gebruiken, probeer de voorbeelden en demo's hierboven, of waarom duikt u er niet meteen in en experimenteert u met het maken van uw eigen lettertype ?
Als u feedback heeft over COLRv1 in Chrome, kunt u een bericht plaatsen op de blink-dev mailinglijst of een probleem melden in onze issue tracker . Als u feedback heeft over het COLRv1-lettertypeformaat zelf, dient u een probleem in bij de COLRv1-specificatie GitHub-repository .
Met Chrome 98 zijn we enthousiast over de manier waarop COLRv1 een geheel nieuw niveau van typografische creativiteit op internet brengt.
Meer informatie
Als u geïnteresseerd bent in meer details, hebben we nog een aantal bronnen voor u:
Om te leren hoe COLRv1 werkt en hoe het in Chrome wordt geïmplementeerd, bekijk Dominik's BlinkOn 15 conferentietoespraak.
- International Unicode Conference #45: Vector Color Fonts, lezing door Roderick Sheeter, Peter Constable en Dominik Röttsches ( video , details van de lezing )
- nanoemoji-lettertypecompiler , die COLRv1-lettertypen produceert uit SVG-afbeeldingen
- De kleurlettertypen GitHub-repository van Google Fonts met huidige builds van Noto Emoji, Twemoji en andere voorbeeldlettertypen
- DJR's showcase van het Bradley Initials- lettertype, waarin COLRv1 wordt onderzocht
- ChromaCheck-tool en -bibliotheek om beschikbare kleurlettertypetechnologieën te detecteren
Dankbetuigingen
Veel dank aan Behdad Esfahbod, Cosimo Lupo, Peter Constable, Ben Wagner, Werner Lemberg, Dave Crossland, Vladimir Levantovsky, Jonathan Kew, Laurence Penney, Chris Lilley, David Jonathan Ross, Underware, Just van Rossum, Roel Nieskens en anderen voor hun bijdragen aan COLRv1.