Farbige Schriftarten
In diesem Thema werden Farbschriftarten, ihre Unterstützung in DirectWrite und Direct2D und deren Verwendung in Ihrer App beschrieben.
Dieses Dokument enthält die folgenden Teile:
- Was sind Farbschriftarten?
- Gründe für die Verwendung von Farbschriftarten
- Welche Arten von Farbschriftarten werden Windows unterstützt?
- Verwenden von Farbschriftarten
- Zugehörige Themen
Was sind Farbschriftarten?
Farbschriftarten, die auch als mehrfarbige schriftarten odertic-Schriftarten bezeichnet werden, sind eine Schriftarttechnologie, die es Schriftart-Designern ermöglicht, mehrere Farben in jedem Glyphen zu verwenden. Farbschriftarten ermöglichen mehrfarbige Textszenarien in Apps und Websites mit weniger Code und stabilerer Betriebssystemunterstützung als Ad-hoc-Techniken, die über dem Textrenderingsystem implementiert sind.
Die Schriftarten, mit den Sie wahrscheinlich am besten vertraut sind, sind keine Farbschriftarten. Diese Schriftarten definieren nur die Form der Glyphen, die sie enthalten, entweder mit Vektorgliederungen oder monoischen Bitmaps. Zur Zeichnen-Zeit füllt ein Textrenderer die Glyphenform mit einer einzelnen Farbe (die Schriftfarbe) aus, die von der app oder dem Dokument angegeben wird, die gerendert wird. Farbschriftarten enthalten dagegen zusätzlich zu Forminformationen Farbinformationen. Bei einigen Ansätzen können Schriftart-Designer mehrere Farbpaletten anbieten, was der Farbschriftart Flexibilität bietet.
Das folgende Beispiel zeigt ein Glyphen aus der Segoe UI Emoji-Farbschriftart. Das Glyph wird links monofarbig und rechts in Farbe gerendert.

Farbschriftarten enthalten in der Regel Fallbackinformationen für Plattformen, die keine Farbschriftarten unterstützen, oder für Szenarien, in denen die Farbfunktionalität deaktiviert wurde. Auf diesen Plattformen werden Farbschriftarten als reguläre monotone Schriftarten gerendert.
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 Header anzuzeigen. Dieser Ansatz ermöglicht flexibilität, aber Rastergrafiken werden nicht gut auf alle Anzeigegrößen skaliert und bieten auch nicht die gleichen Barrierefreiheitsfunktionen wie echter Text. Eine weitere gängige Technik ist das Überlagern mehrerer monotoner Schriftarten in verschiedenen Schriftfarben, aber dies erfordert in der Regel zusätzlichen Layoutcode für die Verwaltung.
Farbschriftarten bieten eine Möglichkeit, diese visuellen Effekte mit der Einfachheit und Funktionalität regulärer Schriftarten zu erzielen. Text, der in einer Farbschriftart gerendert wird, ist identisch mit anderem Text: Er kann kopiert und eingefügt, von Barrierefreiheitstools analysiert werden usw.
Welche Arten von Farbschriftarten werden Windows unterstützt?
Die OpenType-Spezifikation definiert mehrere Möglichkeiten zum Einbetten von Farbinformationen in eine Schriftart. Ab Windows 10 Anniversary Update unterstützen DirectWrite und Direct2D (und die darauf Windows-Frameworks) alle diese Ansätze. Sie sind in der folgenden Tabelle zusammengefasst:
| Verfahren | Beschreibung |
|---|---|
| COLR / CPAL-Tabellen | Verwendet Ebenen von farbigen Vektoren, deren Formen auf die gleiche Weise definiert werden wie einfarbige Glyphengliederungen. Hinweis: Unterstützt ab Windows 8.1. |
| SVG-Tabelle | Verwendet Vektorbilder, die im Skalierbaren Vektorgrafikformat erstellt wurden. Hinweis: Ab Windows 10 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. |
| BESENT / CBLC-Tabellen | Verwendet eingebettete Farbbitmapbilder. |
| sbix-Tabelle | Verwendet eingebettete Farbbitmapbilder. |
Verwenden von Farbschriftarten
Aus Sicht des Benutzers sind Farbschriftarten nur Schriftarten. Beispielsweise können sie in der Regel auf die gleiche Weise wie monotone Schriftarten installiert und aus dem System deinstalliert werden, und sie werden als regulärer, auswählbarer Text gerendert.
Aus Entwicklersicht werden Farbschriftarten in der Regel auf die gleiche Weise wie monotone Schriftarten verwendet. In den XAML- und Microsoft Edge-Frameworks können Sie Ihren Text mit Farbschriftarten auf die gleiche Weise formatieren wie reguläre Schriftarten, und Ihr Text wird standardmäßig in Farbe gerendert. Wenn Ihre App jedoch Direct2D-APIs (oder Win2D-APIs) direkt aufruft, um Text zu rendern, muss sie explizit Farbschriftartrendering anfordern.
Verwenden von Farbschriftarten in einer XAML-App
Die Textelemente der XAML-Plattform (z. B. TextBlock, TextBox, RichEditBox, Glyphenund FontIcon)unterstützen standardmäßig Farbschriftarten. Formatieren Sie Ihren Text einfach mit einer Farbschriftart, und alle Farbstriche werden in Farbe gerendert. Das folgende Codebeispiel zeigt eine Möglichkeit zum Formatieren eines TextBlock mit einer Farbschriftart, die mit Ihrer App gepackt ist. Das gleiche Verfahren gilt für reguläre Schriftarten.
<TextBlock FontFamily="Assets/TMyColorFont.otf#MyFontFamilyName">Here is some text.</TextBlock>
Wenn Ihr XAML-Textelement niemals mehrfarbigen Text rendern soll, legen Sie dessen IsColorFontEnabledProperty-Eigenschaft auf FALSE fest.
Verwenden von Farbschriftarten in Microsoft Edge
Farbschriftarten werden standardmäßig in Websites und Web-Apps gerendert, die auf Microsoft Edge ausgeführt werden, einschließlich des XAML-WebView-Steuerelements. Verwenden Sie einfach HTML und CSS, um Ihren Text mit einer Farbschriftart zu formatieren, und alle Farbstriche werden in Farbe gerendert.
Verwenden von Farbschriftarten mit DirectWrite und Direct2D
Ihre App kann direct2D-Textzeichnungsmethoden auf höherer Ebene (DrawText und DrawTextLayout)oder Techniken auf niedrigerer Ebene verwenden, um Glyphenläufe direkt zu zeichnen. In beiden Fällen erfordert Ihre App Codeänderungen, um Farbglyphen ordnungsgemäß zu behandeln. Wenn Ihre App die DrawText- und DrawTextLayout-APIs von Direct2D verwendet, beachten Sie, dass diese standardmäßig keine Farbstriche rendern. Dadurch werden unerwartete Verhaltensänderungen in Textrendering-Apps vermieden, die vor der Unterstützung von Farbschriftart entworfen wurden.
Um das Farbglyphenrendering zu aktivieren, übergeben Sie das Optionsflag D2D1 _ DRAW TEXT OPTIONS ENABLE COLOR _ _ _ _ _ FONT an die Zeichnungsmethode. Das folgende Codebeispiel zeigt, wie die DrawText-Methode von Direct2D zum Rendern einer Zeichenfolge in einer Farbschriftart aufruft:
// 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 Glyphenläufe direkt zu verarbeiten, funktioniert sie weiterhin bei Vorhandensein von Farbschriftarten, kann aber ohne zusätzliche Logik keine Farbstriche zeichnen.
Um Farbstriche ordnungsgemäß zu verarbeiten, sollte Ihre App:
- Übergeben Sie die Ausführungsinformationen des Glyphen an TranslateColorGlyphRunzusammen mit einem DWRITE _ GLYPH _ IMAGE _ FORMATS-Parameter, der angibt, für welche Typen von Farbglyphen die App vorbereitet ist. Wenn Farbglyphen vorhanden sind (basierend auf der Schriftart und den angeforderten _ DWRITE-GLYPH-BILDFORMATen), _ _ teilt DirectWrite die primäre Glyphe in einzelne Farbglyphenläufe auf, auf die über das zurückgegebene IDWriteColorGlyphRunEnumerator-Objekt in Schritt 4 zugegriffen werden kann.
- Überprüfen Sie das von TranslateColorGlyphRun zurückgegebene HRESULT, um zu ermitteln, ob Farbglyphenläufe erkannt wurden. Ein HRESULT von DWRITE E _ _ NOCOLOR gibt an, dass keine anwendbaren Farbstriche ausgeführt werden.
- Wenn TranslateColorGlyphRun keine Farbglyphenläufe gemeldet hat (durch Zurückgeben von DWRITE _ E _ NOCOLOR), wird die gesamte Glyphenläufe als monotones Element behandelt, und Ihre App sollte es wie gewünscht zeichnen (z. B. mit ID2D1DeviceContext::D rawGlyphRun).
- Wenn TranslateColorGlyphRun das Vorhandensein von Farbglyphenläufen berichtet, sollte Ihre App die Ausführung des primären Glyphen ignorieren und stattdessen die von TranslateColorGlyphRun zurückgegebenen Farbstrichläufe verwenden. Iterieren Sie dazu das zurückgegebene IDWriteColorGlyphRunEnumerator1-Objekt, indem Sie die einzelnen Farbglyphenläufe abrufen und entsprechend dem Glyphenbildformat zeichnen (Sie können z. B. DrawColorBitmapGlyphRun und DrawSvgGlyphRun verwenden, um Farbbitmap-Glyphen bzw. SVG-Glyphen zu zeichnen).
Das folgende 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 mit Win2D
Ähnlich wie direct2D rendern Win2D-Textzeichnungs-APIs standardmäßig keine Farbstriche. Um das Farbglyphenrendering zu aktivieren, legen Sie das Optionsflag EnableColorFont im Textformatobjekt fest, das Ihre App an die Textzeichnungsmethode übergibt. Das folgende Codebeispiel zeigt, wie Sie eine Zeichenfolge mit win2D in einer Farbschriftart rendern:
// 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
);
Zugehörige Themen
DirectWrite eines farbigen Glyphenbeispiels
IDWriteFontFace4-Schnittstelle