Colrv1- und CSS-Schriftpalette

According to Toshi Omagari, the author of Arcade Game Typography, the world's first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser support since 2018 (even in Internet Explorer!).

Die Technologie eröffnet eine völlig neue Ader typografischer Kreativität. Während einige der Farbschriften, die ich gesehen habe, gruselig waren, sind chromatische Schriftarten im besten Fall Spaß, innovativ und aufmerksam. With both the addition of a new CSS features — including the font-palette property and @font-palette-values rule — for controlling the color palette of color fonts and the evolution of the COLR font format, it's a great time to dive in and experiment with with what modern web typography can do.

COLR -Unterstützung

I last wrote about color fonts in 2018. At the time, there were four different standards for multicolored typefaces: OpenType-SVG, COLR, SBIX, and CBDT/CBLC. Sie können Chromacheck verwenden, um zu sehen, welche Farben Schriftart Ihr eigener Browser unterstützt.

Google Chrome hat OpenType-SVG als "Wontfix" gekennzeichnet, was bedeutet, dass das Format niemals von Chrome oder Edge unterstützt wird. Sbix und CBDT/CBLC können meist für die Verwendung im Web ignoriert werden, da sie beide auf Rasterbildern basieren und in größeren Schriftgrößen verschwommen werden. Die große Dateigröße von Bitmap-basierten Schriftarten macht sie auch zu einer schlechten Wahl für das Web.

Ulrike Rausch ist der Schöpfer von LIEBEIDE, einer Bitmap -Farbschrift, die das Aussehen eines Kugelschreibers unheimlich repliziert. "Mein größtes Ziel war es immer, handgeschriebenen Text so authentisch wie möglich zu reproduzieren", sagte sie mir. „Für Leutheide konnte ich diese handgefertigten Attribute endlich mit einer Schriftart simulieren. Der Nachteil? Alle PNG -Bilder in der Schriftartdatei addieren und führen zu einer enormen OTF -Dateigröße. Dies ist möglicherweise kein Problem für Desktop -Anwendungen wie Adobe Indesign, aber für die Verwendung im Web ist die Schriftart kaum anwendbar. “

Alle Browser unterstützen Colr -Schriftarten (jetzt allgemein als Colrv0 bezeichnet). Version 98 von Chrome (und Edge), veröffentlicht im Februar, fügte Unterstützung für Colrv1 hinzu, eine Entwicklung des Formats.

Diese Browser -Support -Daten stammen von Caniuse, was mehr Details enthält. Eine Zahl zeigt an, dass Browser die Funktion in dieser Version und auf.

Desktop

Mobile / Tablet

Colrv0 und colrv1

ColRV1 ist Teil des Standards Openentype 1.9. While the initial COLRv0 lacked many of the creative possibilities of OpenType-SVG, COLRv1 matches those possibilities while avoiding certain drawbacks. Colrv0 kann beispielsweise nur feste Farben ausführen, während Colrv1 lineare, radiale und konize -Gradienten ausführen kann. Das Format fügt auch Komposition und Mischung hinzu und ermöglicht die Wiederverwendung von Formrückweilungen, um die Dateigröße zu speichern.

Typography expert Roel Nieskins explains: “I used to say the OpenType-SVG format was the best format as it offered the most versatility — until I realized this is just too complex for a low-level job like text rendering. Es implementiert eine grundlegende Teilmenge von SVG auf der Schriftrender -Ebene. Aber es funktioniert nicht gut mit anderen Schriftarten (Hinweis, variable Äxte usw.) und es ist ein Schmerz zu implementieren. Also wechselte ich die Seiten auf colr. COLR wird im Grunde alles wiederverwendet, was OpenType-Schriftarten bereits haben. Es fügt nur Schicht und die Möglichkeit hinzu, die Farbe jeder Schicht zu ändern. Einfach, aber effektiv. “

COLRv1 is entirely compatible with variable font axes, and there are already examples of variable COLR fonts like Merit Badge, Plakato Color and Rocher Color.

Here's a striking example from Ulrike Rausch of what's possible with the format, a (currently unreleased) typeface which digitally recreates the look of a neon sign:

Akiem Helmling of the type foundry Underware is enamored with COLRv1, telling me that “[t]he COLRv1 format can potentially have a similar (or even bigger) impact on type design than variable fonts had in recent years.” Für Akiem ist es zweifellos das überlegene Format. „Alle früheren Farbformate waren schlechte Hacks, um Glyphen Farben hinzuzufügen. Während OpenType-SVG von einigen Menschen als eine gute Lösung angesehen wird, ist dies aus meiner Sicht überhaupt nicht. Aus pragmatischer Sicht ist SVG ein „verschlossener Raum“ innerhalb der offenen Struktur des Openentyps. Es gibt keine Möglichkeit, Daten wiederzuverwenden oder zu verknüpfen oder eine Verbindung zwischen anderen Schriftarten und der SVG-Tabelle zu erstellen. Aus diesem Grund können wir keine variable Schriftart mit variablen SVG -Daten erstellen. “

It's still early days for the format. Mozilla hasn't yet shipped COLRv1 but has taken a positive position on the format, stating that it has “the potential to supersede OpenType-SVG fonts in web use.” Apple zögert, es in Safari zu implementieren.

COLRv1 fonts will still show up and be readable in these browsers but all the letter's will be a single solid color (which you can set with the CSS color property, just like with a normal font). We're yet to see many type foundries release COLRv1 typefaces, and some popular design tools like Figma don't even support COLRv0, but I'm hopeful and believe it will be the future of color typography on the web. In the short time COLRv1 has been around there have already been some beautiful examples of what the technology can do, such as Reem Kufi and Bradley Initials.

Colr und CSS

Wenn Sie eine Farbschrift verwenden, möchten Sie wahrscheinlich die Farben steuern können. Bisher war das mit CSS unmöglich. Die Schriftart der Schriftpalette bringt die Möglichkeit, das Standard-Farbschema einer Schrift zu überschreiben und eigene anzuwenden. Diese Eigenschaft arbeitet auf Colrv0- und Colrv1 -Schriftarten. (Apple's Myles Maxfield explains that SVG fonts can opt-in to using palettes, whereas all the colors of a COLR typeface are automatically overridden by CSS.)

Eine anständige Farbpalette zu finden, ist eine Kunst. Einige Typdesigner haben die harte Arbeit für uns geleistet und beinhalten alternative Paletten innerhalb der Schrift. Sie können aus diesen verschiedenen Farbschemata mit der Basispalette in CSS auswählen.

Wie finden Sie heraus, ob eine Schriftart eine alternative Palette anbietet? Die Seite für die Schriftart könnte es Ihnen sagen. Wenn nicht, gibt es ein praktisches Tool namens Wakamai Fondue, das alle verfügbaren Farbschemata auflistet (siehe Bild unten). In diesem Beispiel werde ich Rocherfarbe verwenden, eine kostenlose variable Farbschrift von Henrique Beer mit einer Flintstones -Atmosphäre. Wenn Sie sich Wakamai Foundue ansehen, können wir sehen, dass diese Schrift vier Farben verwendet und mit elf verschiedenen Palettenoptionen ausgestattet ist.

Verwenden Sie die Basispalette: 0 wählt die Standard-Farbpalette aus (im Fall von Rocher, das sind Orangenschirme und ein Braun).

Verwenden Sie die Basispalette: 1 wählt die erste alternative Palette aus, die vom Ersteller der Schrift und so weiter definiert ist. Im folgenden Code -Beispiel wähle ich eine Farbpalette aus, die sich mit verschiedenen Graustufen befinden:

 @font-palette-values-Grays {
  Schriftfamilie: Rocher;
  Basispalette: 9;
}

Sobald Sie eine Palette mit der Regel von CSS @Font-Palette-Werten ausgewählt haben, können Sie sie mit der Font-Palette-Eigenschaft anwenden:

 .Grays {
  Schriftfamilie: 'Rocher';
  Schriftpalette:-Grys;
}

Natürlich möchten Sie möglicherweise Ihre eigene Palette erstellen, die Ihren Markenfarben entspricht oder Ihre eigene Design -Sensibilität entspricht. Wenn Sie alle Farben überschreiben möchten, müssen Sie die Basispalette nicht angeben.

Nehmen wir als Beispiel Bungee von der Pionierin David Jonathan Ross. Es verwendet nur standardmäßig zwei Farben, rot und weiß. Im folgenden Beispiel überschreibe ich beide Farben der Schriftart, sodass die Basispalette keine Rolle spielt und weggelassen wird:

 @font-palette-values--pinkandgray {
  Schriftfamilie: Bungee;
  Überschreibungsfarben:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values ​​--grayandpink {
  Schriftfamilie: Bungee;
  Überschreibungsfarben:
    0 #ff3a92,
    1 #c1cbed;
}

Alternativ können Sie die Basispalette als Ausgangspunkt einstellen und nur einige der Farben ändern. Unten benutze ich die graue Farbpalette von Rocher, aber eine Farbe mit einem Minzgrün überschreibt:

 @font-palette-values-GraysRemix {
  Schriftfamilie: Rocher;
  Basispalette: 9;
  Überschreibungsfarben: 
    2 RGB (90.290,210);
}

Körper {
  font-family: "Rocher";
  Schriftpalette:-GraysRemix;
}

When specifying override-colors it's difficult to know which bit of the font will be overridden by which number — you have to play around and experiment and achieve the desired effect through trial and error.

Sollten Sie sich wünschen, können Sie sogar die Farbe von Emoji -Schriftarten wie Twemoji (siehe unten) oder Noto ändern. Hier ist eine lustige Demo von einem Schriftartingenieur bei Google.

Aktuelle Einschränkungen

Eine bedauerliche Einschränkung zumindest vorerst ist, dass CSS-benutzerdefinierte Eigenschaften in @font-palette-Werten nicht funktionieren. Das heißt, das Folgende ist ungültig:

 @font-palette-values--pinkandblue {
  Schriftfamilie: Bungee;
  Überschreibungsfarben:
    0 var (-rosa),
    1 var (-blau);
}

Another limitation: animations and transitions from one font-palette to another don't interpolate — meaning you can switch instantly from one palette to another, but can't gradually animate between them. Mein Traum von einer grundlegend animierten Emoji -Schrift ist leider nicht realisiert.

Browserunterstützung

font-palette and @font-palette-values have been supported in Safari since version 15.4, and landed in Chrome and Edge with the release of version 101.

Diese Browser -Support -Daten stammen von Caniuse, was mehr Details enthält. Eine Zahl zeigt an, dass Browser die Funktion in dieser Version und auf.

Desktop

Mobile / Tablet

Anwendungsfälle

Sie können sich wahrscheinlich bereits vorstellen, wie Sie in Ihren eigenen Projekten Farbschriften verwenden können. Es gibt jedoch einige spezifische Anwendungsfälle, die es wert sind, angerufen zu werden.

COLR- und Icon -Schriftarten

Icon -Schriftarten sind möglicherweise nicht mehr die beliebteste Methode, um Symbole im Web anzuzeigen (Chris erklärt warum), aber sie werden immer noch weit verbreitet. If you use an icon font with multiple colors, like Duotone from FontAwesome or the two-tone icons from Material Design, font-palette could offer an easier method for customization.

Lösen des Emoji -Problems

Nolan Lawson hat kürzlich über die Probleme der Verwendung von Emoji im Web geschrieben. Der Chrome Developer -Blog erklärt eine ziemlich komplexe aktuelle Lösung:

Wenn Sie benutzergenerierte Inhalte unterstützen, verwenden Ihre Benutzer wahrscheinlich Emojis. Today it's very common to scan text and replace any emoji encountered with images to ensure consistent cross-platform rendering and the ability to support newer emojis than the OS supports. Diese Bilder müssen dann während der Zwischenablementvorgänge auf Text zurückgeschaltet werden.

Wenn es eine größere Browser -Unterstützung erhält, bietet Colrv1 -Emoji -Schriftarten einen weitaus einfacheren Ansatz. ColRV1 ist auch mit dem Vorteil, dass er in jeder Größe knusprig aussieht, während einheimische Browser -Emojis in größeren Schriftgrößen verschwommen und pixelig werden.

Einpacken

Vor Farbschriften war die typografische Kreativität im Web darauf beschränkt, Striche oder Gradientengefüllungen mit CSS anzuwenden. You could always do something more custom with a vector image, but that's not real text — it can't be selected by the user and copied to the clipboard, it can't be searched on the page with Command F , it isn't read by screen readers or search engines, and you'd need to open Adobe Illustrator just to edit the copy.

Farbschriften haben das Potenzial, die Aufmerksamkeit eines Benutzers wirklich auf sich zu ziehen und sie perfekt für Zielseiten und Banner zu machen. They may not be something you reach for often, but they promise new expressive and creative possibilities for web design that can make your site stand out.

Das obige ist der detaillierte Inhalt vonColrv1- und CSS-Schriftpalette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!