Unterstützung für Farbschriftarten
In diesem Thema werden Farbschriftarten, deren Unterstützung in DirectWrite und Direct2D (und einigen anderen Frameworks) sowie deren Verwendung in Ihrer App beschrieben.
Was sind Farbschriftarten?
Standardmäßig weist eine Glyphe eine Form, aber keine inhärente Farbe auf. Sowohl DirectWrite als auch Direct2D verfügen über DrawGlyphRun-Methoden, die Glyphenläufe rendern, indem die Glyphenformen mit einer angegebenen Textfarbe gefüllt werden. Der Einfachheit halber wird dies als monochromes Glyphenrendering bezeichnet. Alle Schriftarten verfügen über monochrome Glyphen. Eine Farbschriftart hingegen verfügt auch über Farbdarstellungen einiger Glyphen. Um Glyphen in Farbe zu rendern, muss Ihre App unterschiedliche Glyphenrendering-APIs verwenden (wie hier erläutert), anstatt die monochromen DrawGlyphRun-Methoden aufzurufen.
Farbschriftarten werden auch als mehrfarbige Schriftarten oder chromatische Schriftarten bezeichnet. Sie sind eine Schriftarttechnologie, die es Schriftartendesignern ermöglicht, mehrere Farben in jeder Glyphe 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 werden.
Die Schriftarten, mit denen die meisten von uns vertraut sind, sind keine Farbschriftarten. Solche Schriftarten definieren nur die Form der Glyphen, die sie enthalten; entweder mit Vektorkonturen oder monochromatischen Bitmaps. Zur Zeichnungszeit füllt ein Textrenderer die Glyphenform mit einer einzelnen Farbe (der Schriftfarbe) aus, die von der app oder dem dokument, das gerendert wird. Farbschriftarten hingegen enthalten neben Forminformationen auch Farbinformationen. Einige Ansätze ermöglichen es Schriftartendesignern, mehrere Farbpaletten anzubieten, was der Farbschriftart künstlerische Flexibilität verleiht.
Hier sehen Sie eine Glyphe aus der Farbschriftart "Segoe UI Emoji". Die Glyphe wird links monochrom und rechts in Farbe 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 reguläre monochromatische Schriftarten gerendert.
Da die Unterstützung von Farbschriftarten auf der Renderingebene für Glyphen implementiert wird, wirkt sich dies nicht auf das Textlayout aus. Dies gilt unabhängig davon, ob Sie die IDWriteTextLayout-Schnittstelle verwenden oder ob Sie einen 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. Und dann kann die Farbschriftartunterstützung aktiviert werden, indem diese monochromen Basis-Glyphenläufe zur Renderingzeit in Farbglyphenausführungen übersetzt 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 erreichen. Websites verwenden beispielsweise häufig Rasterbilder anstelle von Text, um umfangreiche Kopfzeilen anzuzeigen. Dieser Ansatz ermöglicht künstlerische Flexibilität, aber Rastergrafiken lassen sich nicht gut auf alle Anzeigegrößen skalieren, und sie bieten auch nicht die gleichen Barrierefreiheitsfunktionen wie realer Text. Eine weitere gängige Technik besteht darin, mehrere monochromatische Schriftarten in verschiedenen Schriftfarben zu überlagern. Dies erfordert jedoch in der Regel zusätzlichen Layoutcode für die Verwaltung.
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 mit 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 unterstützen Version 1607 (Anniversary Update), DirectWrite und Direct2D (sowie die darauf basierenden Windows-Frameworks) alle folgenden Ansätze:
| Verfahren | Beschreibung |
|---|---|
| COLR/CPAL-Tabellen | Verwendet Ebenen von farbigen Vektoren, deren Formen auf die gleiche Weise wie einfarbige Glyphenkonturen definiert werden. Der Support wurde in Windows 8.1 gestartet. |
| SVG-Tabelle | Verwendet Vektorbilder, die im SVG-Format (Scalable Vector Graphics) erstellt wurden. Ab Windows 10 unterstützt Version 1607 (Anniversary Update) 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-Tabellen | Verwendet eingebettete Farbbitbitbitbilder. |
| sbix-Tabelle | Verwendet eingebettete Farbbitbitbitbilder. |
Verwenden von Farbschriftarten
Aus Benutzersicht sind Farbschriftarten nur Schriftarten. Beispielsweise können sie in der Regel auf die gleiche Weise wie monochromatische Schriftarten installiert und aus dem System deinstalliert werden. und sie werden als regulärer, auswählbarer Text gerendert.
Auch aus Entwicklersicht werden Farbschriftarten in der Regel genauso verwendet wie monochromatische Schriftarten. In den XAML- und Microsoft Edge-Frameworks können Sie Ihren Text mit Farbschriftarten auf die gleiche Weise formatieren wie bei regulären Schriftarten, und standardmäßig wird Der 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 Textzeichnungsmethoden auf höherer Ebene von Direct2D (DrawText und DrawTextLayout) verwenden oder Techniken auf niedrigerer Ebene verwenden, um Glyphenläufe direkt zu zeichnen. In beiden Fällen benötigt Ihre App spezifischen Code, um Farbsymbole ordnungsgemäß behandeln zu können. Die DrawText - und DrawTextLayout-APIs von Direct2D rendern standardmäßig keine Farbglyphen. Dadurch sollen unerwartete Verhaltensänderungen in Textrendering-Apps vermieden werden, die vor der Unterstützung von Farbschriftarten entwickelt wurden.
Um das Rendern von Farbsymbolen zu aktivieren, übergeben Sie das D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT-Optionsflag an die Zeichnungsmethode. Das folgende Codebeispiel zeigt, wie die DrawText-Methode von Direct2D aufgerufen wird, 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 Glyphenausführungen direkt zu behandeln, funktioniert sie weiterhin in Anwesenheit von Farbschriftarten, kann jedoch keine Farbsymbole ohne zusätzliche Logik zeichnen.
Um Farbglyphen ordnungsgemäß zu behandeln, sollte Ihre App Folgendes ausführen:
- Übergeben Sie die Glyphenausführungsinformationen an TranslateColorGlyphRun, zusammen mit einem DWRITE_GLYPH_IMAGE_FORMATS-Parameter , der angibt, für welche Typen von Farbsymbolen die App vorbereitet ist. Wenn Farbglyphen vorhanden sind (basierend auf der Schriftart und der angeforderten DWRITE_GLYPH_IMAGE_FORMATS), teilt DirectWrite die primäre Glyphe in einzelne Farbglyphenläufe auf, auf die über das zurückgegebene IDWriteColorGlyphRunEnumerator1-Objekt in Schritt 4 zugegriffen werden kann.
- Überprüfen Sie das von TranslateColorGlyphRun zurückgegebene HRESULT, um festzustellen, ob Farbglyphenausführungen erkannt wurden. Ein HRESULT von DWRITE_E_NOCOLOR gibt an, dass keine anwendbare Farbglyphenausführung vorhanden ist.
- Wenn TranslateColorGlyphRun keine Farbglyphenausführungen meldet (indem DWRITE_E_NOCOLOR zurückgegeben wird), wird der gesamte Glyphenlauf als monochromatisch behandelt, und Ihre App sollte sie wie gewünscht zeichnen (z. B. mit ID2D1DeviceContext::D rawGlyphRun).
- Wenn TranslateColorGlyphRun das Vorhandensein von Farbglyphenausführungen meldet, sollte Ihre App die primäre Glyphenausführung ignorieren und stattdessen die von TranslateColorGlyphRun zurückgegebenen Farbglyphenausführungen verwenden. Um dies zu tun, durchlaufen Sie das zurückgegebene IDWriteColorGlyphRunEnumerator1-Objekt , ruft jede Farbglyphenausführung ab, und zeichnen Sie es entsprechend dem Glyphenbildformat (z. B. können Sie DrawColorBitmapGlyphRun und DrawSvgGlyphRun verwenden, um Farbbitbitlyphen bzw. SVG-Glyphen zu zeichnen).
In diesem Codebeispiel wird die allgemeine Struktur dieser Prozedur veranschaulicht:
// 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, Glyphen und 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 TextBlocks mit einer Farbschriftart, die in Ihrer App gepackt ist. Die gleiche Technik gilt für reguläre Schriftarten.
<TextBlock FontFamily="Assets/TMyColorFont.otf#MyFontFamilyName">Here's some text.</TextBlock>
Wenn Das XAML-Textelement niemals mehrfarbigen Text rendern soll, legen Sie dessen IsColorFontEnabledProperty-Eigenschaft auf fest false.
Tipp
Die obigen Links beziehen sich auf die WinUI 3-Versionen dieser XAML-Steuerelemente. Sie finden die Universelle Windows-Plattform -Entsprechungen (UWP) im Windows.UI.Xaml.Controls-Namespace.
Verwenden von Farbschriftarten in Microsoft Edge
Farbschriftarten werden standardmäßig in Websites und Web-Apps gerendert, die unter 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 die Textzeichnungs-APIs von Win2D standardmäßig keine Farbsymbole. Um das Rendern von Farbsymbolen zu aktivieren, legen Sie das Optionsflag EnableColorFont im Textformatobjekt fest, das die App an die Textzeichnungsmethode übergibt. Im folgenden Codebeispiel wird gezeigt, 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
);