Neue Möglichkeiten zum Spielen mit CSS-Schriftarten: Implementierung farbiger Schriftarten

Was wäre, wenn Ihre Designer die folgende Schriftart als Titelschriftart für einige besondere Veranstaltungen verwenden möchten? Machen Sie ein Bild daraus. Dann können folgende Probleme auftreten: Anpassung an unterschiedliche Bildschirme. Wenn Sie nur Bilder in einer Größe erstellen, ist der Effekt nach dem Vergrößern oder Verkleinern nicht sehr gut. Direkt in SVG? Es scheint unmöglich zu sein, es in Word zu kopieren und fett zu machen. Mit anderen Worten, diese Methode führt dazu, dass der „Text“ selbst die Fähigkeit verliert, die echter Text haben sollte.

Hier kommen die Vorteile farbiger Schriftarten zum Tragen. Es erfüllt nicht nur die Anforderungen an visuelle Effekte, sondern verfügt auch über die Funktionen eines normalen Textes. Es kann kopiert, eingefügt und von Bildschirmleseprogrammen gelesen werden, ohne den normalen Betrieb zu beeinträchtigen.

Playbox von Matt Lyon

Was ist eine Farbschriftart?

Erster Blick auf Farbschriftarten

Bei den uns bekannten herkömmlichen Schriftarten beschreibt die Schriftdatei selbst nur die Erscheinungsmerkmale der Schriftart, zu denen im Allgemeinen Vektorumrissdaten oder monochrome Bitmap-Daten gehören. Wenn ein Browser eine monochrome Schriftart rendert, füllt die Rendering-Engine den Glyphenbereich mit der festgelegten Schriftfarbe und zeichnet schließlich den entsprechenden Text und seine festgelegte Farbe. Farbschriftarten speichern nicht nur die Erscheinungsmerkmale der Schriftart, sondern auch die Farbinformationen und können sogar verschiedene Farbschemata in der Schriftart bereitstellen, was die Flexibilität erhöht und für reichhaltigere Erscheinungsdetails sorgt.

Die am häufigsten im täglichen Gebrauch verwendeten Farbschriften sind Emoji-Ausdrücke. Unter Windows 10 ist Segoe UI Emoji beispielsweise eine Farbschriftart.

Normalerweise enthalten Farbschriften auch einige Kompatibilitätsinformationen, darunter Unicode-codierte monochrome Glyphendaten, sodass auf einigen Plattformen, die Farbschriften nicht unterstützen, die Glyphen von Farbschriften trotzdem wie normale Schriften wiedergegeben werden können, wodurch ein Abwärtskompatibilitätseffekt erzielt wird.

Implementierungsstandards für Farbschriften

In der Geschichte des Farbschriftdesigns verfügte jedes Unternehmen über einen eigenen Implementierungsplan, was zu unterschiedlichen Standards für in OpenType-Schriftarten eingebettete Farbinformationen führte. Im neuesten OpenType-Standard gibt es bis zu vier Beschreibungsformate für Farbschriftdaten.

1. SVG ist ein von Adobe und Mozilla entwickelter Vektorschriftstandard. Es enthält nicht nur die standardmäßigen TrueType- oder CFF-Glypheninformationen, sondern auch optionale SVG-Daten, die die Definition von Farben, Farbverläufen und sogar Animationseffekten für die Schriftart ermöglichen. Die Farbinformationen im SVG-Standard werden auch in CPAL gespeichert.
2. COLR + CPAL, von Microsoft geleitete Vektorschriftstandards. Es enthält COLR, also Glyph Layer Data , und CPAL, eine Farbinformationstabelle , deren Unterstützung in Windows 8.1 und späteren Versionen integriert ist.
3. CBDT + CBLC, ein von Google geleiteter Bitmap-Schriftstandard. Es enthält CBDT- Farbumriss-Bitmap-Daten und CBLC -Bitmap-Positionierungsdaten und die Unterstützung hierfür ist in Android integriert.
4. SBIX, ein von Apple geleiteter Bitmap-Schriftstandard. SBIX oder Standard Bitmap Image List enthält Bildinformationen für PNG, JPEG oder TIFF und die Unterstützung dafür ist in macOS und iOS integriert.

Browserunterstützung für verschiedene Standards

Datenquelle: www.colorfonts.wtf

Angesichts der vielen Standards und der uneinheitlichen Browserunterstützung fragen Sie sich vielleicht, ob wir Schriftarten aus Kompatibilitätsgründen gemäß UA in unterschiedlichen Formaten verteilen müssen? Auf Wiedersehen!

Warten Sie eine Minute, junger Mann!

Im Jahr 2016 einigten sich die großen Hersteller schließlich darauf, OpenType SVG als Standard für Farbschriften zu verwenden. Dabei handelt es sich um das oben erwähnte SVG, das derzeit auch vom W3C verwendet wird . Ich gehe davon aus, dass in naher Zukunft die Browser aller großen Hersteller sukzessive den vom W3C verwendeten SVG-Standard unterstützen werden.

Aktueller Status der Schriftmodulstandards

CSS-Fonts-Modul Level 3: Derzeit im Kandidatenempfehlungsstatus, handelt es sich um einen Standard, der von gängigen Browsern weitgehend implementiert wurde. Die neueste Version des Kandidatenstandards wurde am 26. Juni dieses Jahres veröffentlicht. Der Level-3-Standard basiert auf den vorherigen CSS3-Schriftarten und CSS3-Web-Schriftarten und verschiebt die mit Schriftartladeereignissen verbundenen Standards in das CSS-Schriftartenlademodul.

CSS-Fonts-Modul Level 4: Der Standard der nächsten Generation der Stufe 3, derzeit im Entwurfsstadium der Arbeitsgruppe, der neueste Entwurf wurde am 10. April aktualisiert. Diese Entwurfsversion basiert auf Level 3 und zu den hinzugefügten neuen Attributen gehört die Unterstützung für Farbschriftarten, die in diesem Artikel vorgestellt wird.

CSS-Farbschriften

In Browsern, die Farbschriftarten unterstützen, werden sie korrekt dargestellt, Sie können jedoch die Verwendung anderer in die Schriftart integrierter Farben nicht steuern. Im Level 4-Standard wurden einige neue Standards in Bezug auf Farbschriften hinzugefügt, damit wir sie besser nutzen können. Schauen wir es uns als Nächstes an.

Schriftfarbe wählen: font-palette

Wir haben früher durch die CPAL-Tabelle gelernt, dass Farbschriftarten eine Vielzahl unterschiedlicher Farbschemata haben können. font-palette verfügt über drei integrierte Parameter und unterstützt benutzerdefinierte Farben, um den Effekt einer Änderung des Farbschemas zu erzielen.

1. normal: Der Browser stellt die Schriftart möglichst als nicht farbige Schriftart dar und wählt ein Farbschema, das sich zum Lesen am besten eignet. Gegebenenfalls wird vom Browser bei der Entscheidungsfindung auch die aktuell eingestellte Schriftfarbe in die Entscheidungsbedingungen miteinbezogen. Es ist auch möglich, automatisch einen Satz von Farbschemata für die Darstellung zu generieren, die nicht in die Schriftart integriert sind.
2. hell: Einige farbige Schriftarten geben in ihren Metadaten an, dass ein bestimmtes Farbschema für die Verwendung auf hellen (fast weißen) Hintergründen geeignet ist. Mit diesem Wert rendert der Browser einfach mit dem ersten Farbschema, bei dem diese Funktion markiert ist. Wenn das Schriftdateiformat keine Metadaten besitzt oder das entsprechende Farbschema in den Metadaten nicht markiert ist, verhält sich der Wert wie gewohnt.
3. dunkel: genau das Gegenteil von hell.
4. Anpassung: Wir haben oben drei grundlegende Farboptionen vorgestellt. Wenn Sie andere Farbschemata verwenden oder anpassen möchten, verwenden wir die Hilfe der als Nächstes vorgestellten @font-palette-values.

Beispiel:

h1 {
    Schriftfamilie: Segoe UI Emojil
    Schriftpalette: hell
}

Benutzerdefinierte Schriftfarbe: @font-palette-values

@font-palette-values ​​​​wird verwendet, um die Farbanpassungsregeln für die angegebene Schriftart zu definieren. Entwickler können damit nicht nur frei zwischen verschiedenen in die Schriftart integrierten Farbschemata wählen, sondern diese auch individuell anpassen. font-palette eines benutzerdefinierten Farbschemas wird ebenfalls über diese Regel festgelegt.

Die grundlegende Definitionsregel lautet @font-palette-values name , name der benutzerdefinierte Name dieser Farbanpassungsregel ist.

Nachfolgend werden drei Hauptattribute erläutert.

Schriftfamilie

Wenn wir das Farbschema für eine Schriftart festlegen, müssen wir zunächst angeben, für welche Schriftart die Farbschemainformationen festgelegt sind. Die aktuelle Farbkonfiguration kann über die font-family an eine Schriftart gebunden werden.

@font-palette-values ​​​​Schnee {
    Schriftfamilie: TriColor;
}

Basispalette

Wenn Autoren farbige Schriftarten erstellen, verwenden sie häufig verschiedene Farbschemata. Beim Speichern dieser Informationen hat jedes Farbschema seine eigene entsprechende id bzw. index . Verwenden Sie base-palette um Ihre Auswahl zu treffen.

@font-palette-values ​​​​Schnee {
    Schriftfamilie: TriColor;
    Basispalette: 5;
}

Farbe-x

Bildnachweis: typography.guru

Das Bild oben zeigt, wie COLR Glyphen übereinander legt. COLR zerlegt die Teile einer Glyphe in Ebenen und fügt die Ebenen in einer bestimmten Reihenfolge zu einer vollständigen Schriftart zusammen. Jede Ebene wird mithilfe der Farbinformationen in CPAL eingefärbt. Um leistungsfähigere Anpassungseffekte zu erzielen, wird im Standard color-x verwendet, um die Möglichkeit bereitzustellen, die Farbe einer bestimmten Ebene zu kopieren. Das x ist die Layer- id .

@font-palette-values ​​​​RedSnow {
    Schriftfamilie: TriColor;
    Basispalette: 5;
    Farbe-1: rgb(255, 0, 0);
}

Das obige Beispiel zeigt, wie die Ebenenfarbe über color-x kopiert wird. Wählen Sie das integrierte Farbschema über base-palette: 5 aus und ändern Sie die Farbe der Ebene mit id 1 im Farbschema über color-1: rgb(255, 0, 0) in Rot.

Weitere bemerkenswerte neue Eigenschaften von Level 4

Schriftgröße min., Schriftgröße max.

Wie die Eigenschaftsnamen andeuten, beschränken diese beiden Eigenschaften den endgültigen Wert der font-size . Wenn der berechnete Wert der font-size die festgelegten Maximal- und Minimalwerte überschreitet, wird der endgültige Wert der font-size direkt in font-min-size oder font-max-size geändert. Dies ist für responsives Design nützlich, da dadurch die Schriftgröße auf einen Bereich begrenzt wird, sodass die Schriftart nicht zu groß oder zu klein wird.

Zusammenfassen

Es gibt eine ganze Reihe interessanter neuer Funktionen im Fonts Module Level 4. Die genauen Auswirkungen und Standardverbesserungen können erst bekannt werden, wenn die gängigen Browser sie unterstützen. Warten wir es ab.

Links in diesem Artikel

https://docs.microsoft.com/en-us/typography/opentype/spec/otff
https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/
https://www.w3.org/TR/css-font-loading/
https://www.w3.org/TR/css-fonts-4/

Verweise

https://www.w3.org/TR/css-fonts-4/
https://docs.microsoft.com/en-us/typography/opentype/spec/
https://typography.guru/journal/windows-color-fonts/
https://www.colorfonts.wtf/

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.