Unterstützung für Farbschriftarten

In diesem Thema werden Farbschriftarten, deren Unterstützung in DirectWrite und Direct2D (und einigen anderen Frameworks) und deren Verwendung in Ihrer App beschrieben.

Was sind Farbschriftarten?

Standardmäßig verfügt eine Glyphe über eine Form, aber keine systeminterne Farbe. Sowohl DirectWrite als auch Direct2D verfügen über DrawGlyphRun Methoden, die Glyphen rendern, indem die Glyphenformen mit einer angegebenen Textfarbe gefüllt werden. Aus Gründen der Einfachheit wird dies als monochrome Glyphenrendering bezeichnet. Alle Schriftarten weisen monochrome Glyphen auf. Eine Farbschriftart hingegen verfügt auch über Farbdarstellungen einiger Glyphen. Und um Glyphen in Farbe zu rendern, muss Ihre App unterschiedliche Glyphenrendering-APIs verwenden (wie wir besprechen), anstatt die monochromen DrawGlyphRun Methoden aufzurufen.

Farbschriftarten werden auch als mehrfarbige Schriftarten oder farbliche Schriftarten bezeichnet. Sie sind eine Schriftarttechnologie, mit der Schriftartdesigner mehrere Farben innerhalb jeder Glyphe verwenden können. Farbschriftarten ermöglichen mehrfarbige Textszenarien in Apps und Websites mit weniger Code und robusterer Betriebssystemunterstützung als ad-hoc-Techniken, die über dem Textrenderingsystem implementiert wurden.

Die Schriftarten, mit denen die meisten von uns vertraut sind, sind nicht Farbschriftarten. Solche Schriftarten definieren nur die Form der Glyphen, die sie enthalten; entweder mit Vektorkonturen oder monochromen Bitmaps. Zur Zeichenzeit füllt ein Textrenderer die Glyphenform mit einer einzelnen Farbe (der Schriftfarbe), die von der App oder dem Dokument angegeben wird, die gerendert wird. Farbschriftarten hingegen enthalten Farbinformationen zusätzlich zu Shape-Informationen. Einige Ansätze ermöglichen Es Schriftartendesignern, mehrere Farbpaletten anzubieten, was die künstlerische Flexibilität der Farbschriftart verleiht.

Hier ist eine Glyphe aus der Schrift "Segoe UI Emoji". Die Glyphe wird in Monochrom auf der linken Seite und in Farbe auf der rechten Seite gerendert.

Farbschriftarten enthalten in der Regel Fallbackinformationen für Plattformen, die sie nicht unterstützen, oder für Szenarien, in denen die Farbfunktionalität deaktiviert wurde. Auf diesen Plattformen werden Farbschriftarten als normale monochrome Schriftarten gerendert.

Da die Unterstützung der Farbschriftart auf Glyphenrenderingebene implementiert wird, wirkt sich dies nicht auf das Textlayout aus. Und das trifft zu, ob Sie die IDWriteTextLayout Schnittstelle verwenden oder ob Sie Ihren eigenen Textlayoutalgorithmus implementieren. Die Zuordnung von Zeichen zu Glyphen und die Positionierung dieser Glyphen verwenden alle monochrome Glyphen-IDs und die zugehörigen Metriken. Die Ausgabe des Textlayoutprozesses ist eine Sequenz von monochromen Glyphenläufen. Anschließend kann die Unterstützung der Farbschriftart aktiviert werden, indem diese monochromen Basis Glyphe in Farbglyphen übersetzt werden, die zur Renderingzeit ausgeführt werden.

Gründe für die Verwendung von Farbschriftarten

In der Vergangenheit haben Designer und Entwickler eine Vielzahl von Techniken verwendet, um mehrfarbigen Text zu erzielen. Websites verwenden z. B. häufig Rasterbilder anstelle von Text, um umfangreiche Kopfzeilen anzuzeigen. Dieser Ansatz ermöglicht künstlerische Flexibilität, Rastergrafiken skalieren jedoch nicht gut auf alle Anzeigegrößen und bieten auch nicht die gleichen Barrierefreiheitsfeatures wie realen Text. Eine weitere gängige Technik besteht darin, mehrere monochrome Schriftarten in verschiedenen Schriftfarben zu überlagern; dies erfordert jedoch in der Regel zusätzlichen Layoutcode zum Verwalten.

Farbschriftarten bieten eine Möglichkeit, diese visuellen Effekte mit der Einfachheit und Funktionalität normaler Schriftarten zu erzielen. Text, der in einer Farbschriftart gerendert wird, ist identisch mit anderem Text: Er kann kopiert und eingefügt werden, er kann von Barrierefreiheitstools analysiert werden usw.

Welche Arten von Farbschriftarten unterstützt Windows?

Die OpenType-Spezifikation definiert mehrere Möglichkeiten zum Einbetten von Farbinformationen in eine Schriftart. Ab Windows 10, Version 1607 (Anniversary Update), unterstützen DirectWrite und Direct2D (und die darauf basierenden Windows-Frameworks) alle folgenden Ansätze:

Technik	Beschreibung
COLR-/CPAL--Tabellen	Verwendet Ebenen von farbigen Vektoren, deren Formen auf die gleiche Weise wie einfarbige Glyphenkonturen definiert sind. Der Support wurde in Windows 8.1 gestartet.
SVG- Tabelle	Verwendet Vektorbilder, die im SVG-Format (Scalable Vector Graphics) erstellt wurden. Ab Windows 10, Version 1607 (Anniversary Update), unterstützt DirectWrite eine Teilmenge der vollständigen SVG-Spezifikation. Nicht alle SVG-Inhalte werden garantiert in einer OpenType SVG-Schriftart gerendert. Weitere Informationen finden Sie unter SVG-Unterstützung.
CBDT/CBLC Tische	Verwendet eingebettete Bitmapbilder.
sbix Tabelle	Verwendet eingebettete Bitmapbilder.

Verwenden von Farbschriftarten

Aus Sicht des Benutzers sind Farbschriftarten nur Schriftarten. Sie können z. B. in der Regel auf die gleiche Weise wie monochrome Schriftarten vom System installiert und deinstalliert werden; und sie werden als normaler, auswählbarer Text gerendert.

Aus Sicht des Entwicklers werden Farbschriftarten in der Regel auf die gleiche Weise wie monochrome Schriftarten verwendet. In den XAML- und Microsoft Edge-Frameworks können Sie Ihren Text auf die gleiche Weise wie normale Schriftarten formatieren, und standardmäßig wird ihr Text in Farbe gerendert. Wenn Ihre App jedoch direkt Direct2D-APIs (oder Win2D-APIs) aufruft, um Text zu rendern, muss sie explizit das Rendern von Farbschriftarten anfordern.

Verwenden von Farbschriftarten mit DirectWrite und Direct2D

Ihre App kann die Methoden für die Textzeichnung auf höherer Ebene von Direct2D (DrawText und DrawTextLayout) verwenden, oder sie können Techniken auf niedrigerer Ebene verwenden, um Glyphen direkt zu zeichnen. In beiden Fällen erfordert Ihre App spezifischen Code, um Farbglyphen richtig zu behandeln. Die DrawText- von Direct2D und DrawTextLayout APIs rendern standardmäßig keine Farbglyphen. So vermeiden Sie unerwartete Verhaltensänderungen in Textrendering-Apps, die vor der Unterstützung der Farbschriftart entworfen wurden.

Um das Rendern von Farbglyphen zu aktivieren, übergeben Sie die D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT Optionskennzeichnung an die Zeichnungsmethode. Das folgende Codebeispiel zeigt, wie Sie die DrawText- Methode von Direct2D aufrufen, um eine Zeichenfolge in einer Farbschriftart zu rendern:

// If m_textFormat points to a font with color glyphs, then the following
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be rendered with m_defaultFillBrush.
m_deviceContext->DrawText(
    m_string->Data(),
    m_string->Length(),
    m_textFormat.Get(),
    m_layoutRect,
    m_defaultFillBrush.Get(),
    D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
    );

Wenn Ihre App APIs auf niedrigerer Ebene verwendet, um Glyphen direkt zu behandeln, funktioniert sie weiterhin in Anwesenheit von Farbschriftarten, kann aber keine Farbglyphen ohne zusätzliche Logik zeichnen.

Um Farbglyphen ordnungsgemäß zu behandeln, sollte Ihre App Folgendes ausführen:

1. Übergeben Sie die Glyphenlaufinformationen an TranslateColorGlyphRunzusammen mit einem DWRITE_GLYPH_IMAGE_FORMATS-Parameter, der angibt, welche Art von Farbglyphe die App verarbeiten soll. Wenn Farbglyphen vorhanden sind (basierend auf der Schriftart und dem angeforderten DWRITE_GLYPH_IMAGE_FORMATS), teilt DirectWrite die primäre Glyphe in einzelne Farbglyphenläufe auf, auf die über die zurückgegebene IDWriteColorGlyphRunEnumerator1-Objekt in Schritt 4 zugegriffen werden kann.
2. Überprüfen Sie die HRESULT- von TranslateColorGlyphRun zurückgegeben, um festzustellen, ob farbglyphenläufe erkannt wurden. Ein HRESULT- von DWRITE_E_NOCOLOR gibt an, dass keine anwendbare Farbglyphe ausgeführt wird.
3. Wenn TranslateColorGlyphRun keine Farbglyphenläufe meldet (durch zurückgeben DWRITE_E_NOCOLOR), wird der gesamte Glyphenlauf als monochrom behandelt, und Ihre App sollte sie wie gewünscht zeichnen (z. B. mit ID2D1DeviceContext::D rawGlyphRun).
4. Wenn TranslateColorGlyphRun das Vorhandensein von Farbglyphenläufen meldet, sollte Ihre App die primäre Glyphenausführung ignorieren und stattdessen die von TranslateColorGlyphRunzurückgegebenen Farbglyphenausführung verwenden. Durchlaufen Sie dazu das zurückgegebene IDWriteColorGlyphRunEnumerator1-Objekt, Jedes Farbglyphenlauf wird abgerufen und entsprechend für das Glyphenbildformat gezeichnet (z. B. können Sie DrawColorBitmapGlyphRun und DrawSvgGlyphRun verwenden, um Farbbitlyphen bzw. SVG-Glyphen zu zeichnen).

Dieses Codebeispiel zeigt die allgemeine Struktur dieser Prozedur:

// An example code snippet demonstrating how to use TranslateColorGlyphRun 
// to handle different kinds of color glyphs. This code does not make any 
// actual drawing calls. 
HRESULT DrawGlyphRun( 
    FLOAT baselineOriginX, 
    FLOAT baselineOriginY, 
    DWRITE_MEASURING_MODE measuringMode, 
    _In_ DWRITE_GLYPH_RUN const* glyphRun, 
    _In_ DWRITE_GLYPH_RUN_DESCRIPTION const* glyphRunDescription, 
) 
{ 
    // Specify the color glyph formats your app supports. In this example, 
    // the app requests only glyphs defined with PNG or SVG. 
    DWRITE_GLYPH_IMAGE_FORMATS requestedFormats = 
        DWRITE_GLYPH_IMAGE_FORMATS_PNG | DWRITE_GLYPH_IMAGE_FORMATS_SVG; 

    ComPtr<IDWriteColorGlyphRunEnumerator1> glyphRunEnumerator; 
    HRESULT hr = m_dwriteFactory->TranslateColorGlyphRun( 
        D2D1::Point2F(baselineOriginX, baselineOriginY), 
        glyphRun, 
        glyphRunDescription, 
        requestedFormats, // The glyph formats supported by this renderer.
        measuringMode, 
        nullptr, 
        0, 
        &glyphRunEnumerator // On return, may contain color glyph runs.
        ); 

    if (hr == DWRITE_E_NOCOLOR) 
    { 
        // The glyph run has no color glyphs. Draw it as a monochrome glyph 
        // run, for example using the DrawGlyphRun method on a Direct2D 
        // device context. 
    } 
    else 
    { 
        // The glyph run has one or more color glyphs. 
        DX::ThrowIfFailed(hr); 

        // Iterate through the color glyph runs, and draw them. 
        for (;;) 
        { 
            BOOL haveRun; 
            DX::ThrowIfFailed(glyphRunEnumerator->MoveNext(&haveRun)); 
            if (!haveRun) 
            { 
                break; 
            } 

            // Retrieve the color glyph run. 
            DWRITE_COLOR_GLYPH_RUN1 const* colorRun; 
            DX::ThrowIfFailed(glyphRunEnumerator->GetCurrentRun(&colorRun)); 

            // Draw the color glyph run depending on its format. 
            switch (colorRun->glyphImageFormat) 
            { 
            case DWRITE_GLYPH_IMAGE_FORMATS_PNG: 
                // Draw the PNG glyph, for example with 
                // ID2D1DeviceContext4::DrawColorBitmapGlyphRun. 
                break; 

            case DWRITE_GLYPH_IMAGE_FORMATS_SVG: 
                // Draw the SVG glyph, for example with 
                // ID2D1DeviceContext4::DrawSvgGlyphRun. 
                break; 

                // ...etc. 
            } 
        } 
    } 

    return hr; 
} 

Verwenden von Farbschriftarten in einer XAML-App

Farbschriftarten werden standardmäßig von den Textelementen der XAML-Plattform unterstützt, z. B. TextBlock-, TextBox-, RichEditBox-, Glyphenund FontIcon. Sie formatieren ihren Text einfach mit einer Farbschriftart, und alle Farbglyphen werden in Farbe gerendert.

Die folgende Syntax zeigt eine Möglichkeit zum Formatieren eines TextBlock- mit einer Farbschriftart, die mit Ihrer App verpackt ist. Die gleiche Technik gilt für normale Schriftarten.

<TextBlock FontFamily="Assets/TMyColorFont.otf#MyFontFamilyName">Here's some text.</TextBlock>

Wenn Ihr XAML-Textelement niemals mehrfarbigen Text rendern soll, legen Sie dessen IsColorFontEnabledProperty- eigenschaft auf falsefest.

Trinkgeld

Die obigen Links beziehen sich auf die WinUI 3-Versionen dieser XAML-Steuerelemente. Sie finden die Entsprechungen der universellen Windows-Plattform (UWP) im Windows.UI.Xaml.Controls Namespace.

Verwenden von Farbschriftarten in Microsoft Edge

Farbschriftarten werden standardmäßig in Websites und Web-Apps gerendert, die in Microsoft Edge ausgeführt werden, einschließlich des XAML-WebView2--Steuerelements. Verwenden Sie einfach HTML und CSS, um Ihren Text mit einer Farbschriftart zu formatieren, und alle Farbglyphen werden in Farbe gerendert.

Verwenden von Farbschriftarten mit Win2D

Ähnlich wie bei Direct2D rendern win2D-Textzeichnungs-APIs standardmäßig keine Farbglyphen. Um das Farbglyphenrendering zu aktivieren, legen Sie das EnableColorFont Optionskennzeichnung im Textformatobjekt fest, das Ihre App an die Textzeichnungsmethode übergibt. Das folgende Codebeispiel zeigt, wie eine Zeichenfolge in einer Farbschriftart mit Win2D gerendert wird:

// The text format that will be used to draw the text. (Declared elsewhere 
// and initialized elsewhere by the app to point to a color font.) 
CanvasTextFormat m_textFormat; 

// Set the EnableColorFont option. 
m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont; 

// If m_textFormat points to a font with color glyphs, then the following
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be rendered with m_color.
args.DrawingSession.DrawText(
    m_string,
    m_point,
    m_color,
    m_textFormat
    );

Verwandte Themen

• ID2D1DeviceContext4::D rawText-Methode
• IDWriteFactory4::TranslateColorGlyphRun-Methode
• IDWriteFontFace4-Schnittstelle
• directWrite-Beispiel-Glyphen-Beispiel-App