색 글꼴 지원
이 항목에서는 색 글꼴, DirectWrite 및 Direct2D(및 기타 프레임워크)의 지원 및 앱에서 사용하는 방법에 대해 설명합니다.
색 글꼴이란?
기본적으로 문자 모양에는 도형이 있지만 내장 색은 없습니다. DirectWrite 및 Direct2D에는 문자 모양 셰이프를 지정된 텍스트 색으로 채워 문자 모양 실행을 렌더링하는 DrawGlyphRun 메서드가 있습니다. 편의를 위해 이를 단색 문자 모양 렌더링이라고 합니다. 모든 글꼴에는 단색 문자 모양이 있습니다. 반면에 색 글꼴에는 일부 문자 모양에 대한 색 표현도 있습니다. 그리고 문자 모양을 색으로 렌더링하려면 앱에서 단색 DrawGlyphRun 메서드를 호출하는 대신 다른 문자 모양 렌더링 API를 사용해야 합니다(설명).
색 글꼴을 여러 가지 색 글꼴 또는 색 글꼴이라고도 합니다. 글꼴 디자이너가 각 문자 모양 내에서 여러 색을 사용할 수 있도록 하는 글꼴 기술입니다. 색 글꼴을 사용하면 텍스트 렌더링 시스템 위에 구현된 임시 기술보다 코드가 적고 운영 체제 지원이 더 강력한 앱 및 웹 사이트에서 여러 가지 색 텍스트 시나리오를 사용할 수 있습니다.
대부분의 사람들이 잘 알고 있는 글꼴은 색 글꼴이 아닙니다 . 이러한 글꼴은 포함된 문자 모양만 정의합니다. 벡터 윤곽선 또는 단색 비트맵을 사용합니다. 그리기 시 텍스트 렌더러는 렌더링되는 앱 또는 문서에서 지정한 단일 색(글꼴 색)을 사용하여 문자 모양 모양을 채웁니다. 반면에 색 글꼴에는 도형 정보 외에 색 정보가 포함됩니다. 일부 방법을 사용하면 글꼴 디자이너가 여러 색 팔레트를 제공하여 색상 글꼴을 유연하게 꾸미는 것이 가능합니다.
다음은 Segoe UI 이모지 색 글꼴의 문자 모양입니다. 문자 모양은 왼쪽의 단색으로 렌더링되고 오른쪽에는 색으로 렌더링됩니다.
색 글꼴에는 일반적으로 지원하지 않는 플랫폼 또는 색 기능이 비활성화된 시나리오에 대한 대체 정보가 포함됩니다. 이러한 플랫폼에서 색 글꼴은 일반 단색 글꼴로 렌더링됩니다.
색 글꼴 지원은 문자 모양 렌더링 수준에서 구현되므로 텍스트 레이아웃에 영향을 주지 않습니다. IDWriteTextLayout 인터페이스를 사용하는지 또는 고유한 텍스트 레이아웃 알고리즘을 구현하는지 여부도 마찬가지입니다. 문자와 문자의 매핑 및 해당 문자 모양의 위치 지정은 모두 단색 문자 모양 ID 및 관련 메트릭을 사용합니다. 텍스트 레이아웃 프로세스의 출력은 단색 문자 모양 실행 시퀀스입니다. 그런 다음, 이러한 단색 기본 문자 모양 실행을 렌더링 시 색 문자 모양 실행으로 변환하여 색 글꼴 지원을 사용하도록 설정할 수 있습니다.
색 글꼴을 사용하는 이유는 무엇인가요?
지금까지 디자이너와 개발자는 다양한 기술을 사용하여 여러 가지 색의 텍스트를 구현했습니다. 예를 들어 웹 사이트는 서식 있는 헤더를 표시하기 위해 텍스트 대신 래스터 이미지를 사용하는 경우가 많습니다. 이러한 접근 방식을 통해 예술적 유연성을 제공하지만 래스터 그래픽은 모든 디스플레이 크기에 맞게 잘 확장되지 않으며 실제 텍스트와 동일한 접근성 기능을 제공하지도 않습니다. 또 다른 일반적인 기술은 여러 단색 글꼴을 다른 글꼴 색으로 오버레이하는 것입니다. 하지만 일반적으로 관리하려면 추가 레이아웃 코드가 필요합니다.
색 글꼴은 일반 글꼴의 모든 단순성과 기능으로 이러한 시각적 효과를 달성하는 방법을 제공합니다. 색 글꼴로 렌더링된 텍스트는 다른 텍스트와 동일합니다. 복사하여 붙여넣을 수 있고 접근성 도구로 구문 분석할 수 있습니다.
Windows에서 지원하는 색 글꼴의 종류는 무엇인가요?
OpenType 사양은 글꼴에 색 정보를 포함하는 여러 가지 방법을 정의합니다. Windows 10 버전 1607(1주년 업데이트), DirectWrite 및 Direct2D(및 이를 기반으로 빌드된 Windows 프레임워크)는 다음과 같은 모든 방법을 지원합니다.
| 방법 | Description |
|---|---|
| COLR/CPAL 테이블 | 단일 색 문자 모양 윤곽선과 동일한 방식으로 셰이프가 정의된 색이 지정된 벡터 레이어를 사용합니다. Windows 8.1 지원이 시작되었습니다. |
| SVG 테이블 | SVG(확장 가능한 벡터 그래픽) 형식으로 작성된 벡터 이미지를 사용합니다. Windows 10 버전 1607(1주년 업데이트)을 기준으로 DirectWrite 전체 SVG 사양의 하위 집합을 지원합니다. 모든 SVG 콘텐츠가 OpenType SVG 글꼴로 렌더링되도록 보장되는 것은 아닙니다. 자세한 내용은 SVG 지원을 참조하세요. |
| CBDT/CBLC 테이블 | 포함된 색 비트맵 이미지를 사용합니다. |
| sbix 테이블 | 포함된 색 비트맵 이미지를 사용합니다. |
색 글꼴 사용
사용자의 관점에서 색 글꼴은 글꼴일 뿐입니다. 예를 들어 일반적으로 단색 글꼴과 동일한 방식으로 시스템에서 설치 및 제거할 수 있습니다. 선택 가능한 일반 텍스트로 렌더링됩니다.
개발자의 관점에서 볼 때 색 글꼴은 일반적으로 단색 글꼴과 동일한 방식으로 사용됩니다. XAML 및 Microsoft Edge 프레임워크에서는 일반 글꼴과 동일한 방식으로 텍스트의 스타일을 색 글꼴로 지정할 수 있으며 기본적으로 텍스트가 색으로 렌더링됩니다. 그러나 앱이 직접 Direct2D API(또는 Win2D API)를 호출하여 텍스트를 렌더링하는 경우 색 글꼴 렌더링을 명시적으로 요청해야 합니다.
DirectWrite 및 Direct2D에서 색 글꼴 사용
앱은 Direct2D의 상위 수준 텍스트 그리기 메서드(DrawText 및 DrawTextLayout)를 사용하거나 하위 수준 기술을 사용하여 문자 모양 실행을 직접 그릴 수 있습니다. 두 경우 모두 앱에서 색 문자 모양을 올바르게 처리하기 위해 특정 코드가 필요합니다. Direct2D의 DrawText 및 DrawTextLayout API는 기본적으로 색 문자 모양을 렌더링하지 않습니다. 색 글꼴을 지원하기 전에 디자인된 텍스트 렌더링 앱에서 예기치 않은 동작이 변경되지 않도록 하기 위한 것입니다.
색 문자 모양 렌더링을 옵트인하려면 그리기 메서드에 D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT 옵션 플래그를 전달합니다. 다음 코드 예제에서는 Direct2D의 DrawText 메서드를 호출하여 문자열을 색 글꼴로 렌더링하는 방법을 보여줍니다.
// 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
);
앱이 하위 수준 API를 사용하여 문자 모양 실행을 직접 처리하는 경우 색 글꼴이 있는 상태에서 계속 작동하지만 추가 논리 없이는 색 문자 모양을 그릴 수 없습니다.
색 문자 모양을 올바르게 처리하려면 앱에서 다음을 수행해야 합니다.
- 앱에서 처리할 준비가 된 색 문자 모양 유형을 나타내는 DWRITE_GLYPH_IMAGE_FORMATS 매개 변수와 함께 문자 모양 실행 정보를 TranslateColorGlyphRun에 전달합니다. 글꼴 및 요청된 DWRITE_GLYPH_IMAGE_FORMATS 따라 색 문자 모양이 있는 경우 DirectWrite 4단계에서 반환된 IDWriteColorGlyphRunEnumerator1 개체를 통해 액세스할 수 있는 개별 색 문자 모양 실행으로 기본 문자 모양 실행을 분할합니다.
- TranslateColorGlyphRun에서 반환된 HRESULT를 확인하여 색 문자 모양 실행이 검색되었는지 확인합니다. DWRITE_E_NOCOLOR HRESULT는 해당 색 문자 모양 실행이 없음을 나타냅니다.
- TranslateColorGlyphRun이 색 문자 모양 실행을 보고하지 않으면(DWRITE_E_NOCOLOR 반환) 전체 문자 모양 실행이 단색으로 처리되고 앱이 원하는 대로 그려야 합니다(예: ID2D1DeviceContext::D rawGlyphRun 사용).
- TranslateColorGlyphRun이 색 문자 모양 실행의 존재를 보고하는 경우 앱은 기본 문자 모양 실행을 무시하고 대신 TranslateColorGlyphRun에서 반환된 색 문자 모양 실행을 사용해야 합니다. 이렇게 하려면 반환된 IDWriteColorGlyphRunEnumerator1 개체를 반복하여 각 색 문자 모양 실행을 검색하고 해당 문자 모양 이미지 형식에 적절하게 그립니다(예: DrawColorBitmapGlyphRun 및 DrawSvgGlyphRun 을 사용하여 각각 색 비트맵 문자 모양 및 SVG 문자 모양을 그릴 수 있습니다).
이 코드 예제에서는 이 프로시저의 일반적인 구조를 보여줍니다.
// 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;
}
XAML 앱에서 색 글꼴 사용
색 글꼴은 기본적으로 XAML 플랫폼의 텍스트 요소(예: TextBlock, TextBox, RichEditBox, 문자 모양 및 FontIcon)에서 지원됩니다. 텍스트의 스타일을 색 글꼴로 지정하면 모든 색 문자 모양이 색으로 렌더링됩니다.
다음 구문은 앱과 함께 패키지된 색 글꼴로 TextBlock 의 스타일을 지정하는 한 가지 방법을 보여 있습니다. 동일한 기술이 일반 글꼴에 적용됩니다.
<TextBlock FontFamily="Assets/TMyColorFont.otf#MyFontFamilyName">Here's some text.</TextBlock>
XAML 텍스트 요소가 여러 가지 빛깔의 텍스트를 렌더링 하지 않도록 하려면 IsColorFontEnabledProperty 속성을 로 false설정합니다.
팁
위의 링크는 해당 XAML 컨트롤의 WinUI 3 버전에 대한 링크입니다. Windows.UI.Xaml.Controls 네임스페이스에서 UWP(유니버설 Windows 플랫폼) 해당 항목을 찾을 수 있습니다.
Microsoft Edge에서 색 글꼴 사용
색 글꼴은 XAML WebView2 컨트롤을 포함하여 Microsoft Edge에서 실행되는 웹 사이트 및 웹앱에서 기본적으로 렌더링됩니다. HTML 및 CSS를 사용하여 텍스트의 스타일을 색 글꼴로 지정하면 모든 색 문자 모양이 색으로 렌더링됩니다.
Win2D에서 색 글꼴 사용
Direct2D와 마찬가지로 Win2D의 텍스트 그리기 API는 기본적으로 색 문자 모양을 렌더링하지 않습니다. 문자 모양 렌더링에 색을 지정하도록 옵트인하려면 앱이 텍스트 그리기 메서드에 전달하는 텍스트 형식 개체에서 EnableColorFont 옵션 플래그를 설정합니다. 다음 코드 예제에서는 Win2D를 사용하여 색 글꼴로 문자열을 렌더링하는 방법을 보여줍니다.
// 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
);
관련 항목
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기