Színes betűtípus támogatása

Ez a témakör a színes betűtípusokat, a DirectWrite és a Direct2D támogatását (és néhány más keretrendszert) ismerteti, valamint azt, hogyan használhatja őket az alkalmazásban.

Mik azok a színes betűtípusok?

Alapértelmezés szerint a karakterjelek alakzattal rendelkeznek, de nem belső színnel. A DirectWrite és a Direct2D is rendelkezik DrawGlyphRun metódussal, amelyek a karakterjelek futtatását egy megadott szövegszínnel töltik ki. Az egyszerűség kedvéért ezt monokróm glyph renderelésként fogjuk hivatkozni. Minden betűtípus monokróm karakterjelekkel rendelkezik. A színes betűtípusok viszont bizonyos karakterjelek színreprezentációit is megjelenítik. A karakterjelek színben való megjelenítéséhez az alkalmazásnak különböző glyph-renderelési API-kat kell használnia (ahogy arról szó lesz), ahelyett, hogy meghívná a monokróm DrawGlyphRun metódusokat.

A színes betűtípusokat többszínű vagy kromatikus betűtípusoknak is nevezik. Ez egy olyan betűtípus-technológia, amellyel a betűtervezők több színt is használhatnak az egyes karakterjelek között. A színes betűtípusok többszínű szövegforgatókönyveket tesznek lehetővé olyan alkalmazásokban és webhelyeken, amelyek kevesebb kódot és robusztusabb operációsrendszer-támogatást nyújtanak, mint a szövegmegjelenítő rendszer felett alkalmazott alkalmi technikák.

A legtöbbünk által ismert betűtípusok nem színes betűtípusokat. Az ilyen betűtípusok csak az általuk tartalmazott karakterjelek alakját határozzák meg; vektoros körvonalakkal vagy monokróm bitképekkel. Rajzoláskor a szövegmegjelenítő egyetlen színnel (betűszínnel) tölti ki a karakteralakzatot, amelyet a renderelt alkalmazás vagy dokumentum határoz meg. A színes betűtípusok viszont alakzatinformációk mellett színinformációkat is tartalmaznak. Egyes megközelítések lehetővé teszik a betűtervezők számára, hogy több színpalettát kínáljanak, így a színes betűtípusok művészi rugalmasságot biztosítanak.

Íme egy karakter a Segoe UI Emoji színes betűtípusából. A karakterjel a bal oldalon monokróm színnel, a jobb oldalon pedig színben jelenik meg.

A színes betűtípusok általában tartalék információkat tartalmaznak az olyan platformokról, amelyek nem támogatják azokat, vagy olyan forgatókönyvek esetében, amelyekben a színfunkció le van tiltva. Ezeken a platformokon a színes betűtípusok normál monokróm betűtípusként jelennek meg.

Mivel a színes betűtípusok támogatása a karakterjelek renderelési szintjén van implementálva, nem befolyásolja a szövegelrendezést. És ez igaz, akár az IDWriteTextLayout felületet használja, akár saját szövegelrendezési algoritmust implementál. A karakterek glyphs-hez való leképezése és a karakterjelek elhelyezkedése mind monokróm karakterazonosítókat és a hozzájuk tartozó metrikákat használnak. A szövegelrendezési folyamat kimenete monokróm gliph-futtatások sorozata. Ezután a színes betűtípusok támogatásának engedélyezéséhez lefordítja a monokróm alap a karakterjelek a rendereléskor futtatott színjelek futtatására.

Miért érdemes színes betűtípusokat használni?

A tervezők és fejlesztők korábban számos különböző technikát használtak a többszínű szövegek eléréséhez. A webhelyek például gyakran raszterképeket használnak szöveg helyett a gazdag fejlécek megjelenítéséhez. Ez a megközelítés lehetővé teszi a művészi rugalmasságot, de a rasztergrafika nem skálázható jól minden megjelenítési méretre, és nem biztosítják ugyanazokat az akadálymentességi funkciókat, mint a valódi szöveg. Egy másik gyakori technika több monokróm betűtípus átfedése különböző betűszínekben; ehhez azonban általában extra elrendezéskódra van szükség.

A színes betűtípusok a hagyományos betűtípusok egyszerűségével és funkciójával biztosítják ezeknek a vizuális effektusoknak a elérését. A színes betűtípussal renderelt szöveg megegyezik a többi szövegéval: másolható és beilleszthető, az akadálymentességi eszközökkel elemezhető stb.

Milyen típusú színes betűtípusokat támogat a Windows?

Az OpenType specifikációja számos módot határoz meg a színinformációk betűtípusba való beágyazására. A Windows 10-től kezdve az 1607-es verzió (évfordulós frissítés), a DirectWrite és a Direct2D (és az ezekre épülő Windows-keretrendszerek) támogatják az alábbi módszereket:

Színes betűtípusok használata

A felhasználó szempontjából a színes betűtípusok csak betűtípusok. Ezek például általában ugyanúgy telepíthetők és távolíthatók el a rendszerből, mint a monokróm betűtípusok; és normál, kiválasztható szövegként jelennek meg.

A fejlesztő szempontjából is a színes betűtípusokat általában ugyanúgy használják, mint a monokróm betűtípusokat. Az XAML- és Microsoft Edge-keretrendszerekben ugyanúgy formázhatja a szöveget színes betűtípusokkal, mint a normál betűtípusokkal, és alapértelmezés szerint a szöveg színben jelenik meg. Ha azonban az alkalmazás közvetlenül meghívja a Direct2D API-kat (vagy Win2D API-kat) a szöveg rendereléséhez, akkor explicit módon színes betűtípus-renderelést kell kérnie.

Színes betűtípusok használata a DirectWrite és a Direct2D használatával

Az alkalmazás használhatja a Direct2D magasabb szintű szövegrajzolási módszereit (DrawText és DrawTextLayout), vagy használhat alacsonyabb szintű technikákat a gliph-futtatások közvetlen rajzolásához. Mindkét esetben az alkalmazásnak konkrét kódra van szüksége a színjelek helyes kezeléséhez. A Direct2D DrawText és DrawTextLayout API-k alapértelmezés szerint nem jelenítik meg a színjeleket. Ez a színkészlet-támogatás előtt tervezett szövegmegjelenítő alkalmazások váratlan viselkedési változásainak elkerülése.

Ha a karakterjelek megjelenítését szeretné használni, adja át a D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT beállításjelzőt a rajzmetódusnak. Az alábbi példakód bemutatja, hogyan hívhatja meg a Direct2D DrawText metódusát egy sztring színkészletben való megjelenítéséhez:

// 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
    );

Ha az alkalmazás alacsonyabb szintű API-kat használ a gliph-futtatások közvetlen kezelésére, akkor továbbra is működni fog szín betűtípusok jelenlétében, de további logika nélkül nem fog tudni színjeleket rajzolni.

A színjelek helyes kezeléséhez az alkalmazásnak a következőnek kell lennie:

1. Adja át a karakterjelek futtatási adatait TranslateColorGlyphRun, valamint egy DWRITE_GLYPH_IMAGE_FORMATS paramétert, amely jelzi, hogy az alkalmazás milyen típusú színjeleket képes kezelni. Ha vannak színjelek (a betűtípus és a kért DWRITE_GLYPH_IMAGE_FORMATSalapján), akkor a DirectWrite az elsődleges karakterjelet külön színjelfuttatásokra osztja, amelyek a visszaadott IDWriteColorGlyphRunEnumerator1 objektumon keresztül érhetők el a 4. lépésben.
2. Ellenőrizze a TranslateColorGlyphRun által visszaadott HRESULT annak megállapításához, hogy észleltek-e színjelfuttatásokat. A DWRITE_E_NOCOLORHRESULT azt jelzi, hogy nincs megfelelő színjelfuttatás.
3. Ha TranslateColorGlyphRun nem jelent színjelfuttatást (DWRITE_E_NOCOLORvisszaadásával), akkor az egész gliph-futtatás monokrómként lesz kezelve, és az alkalmazásnak a kívánt módon kell rajzolnia (például ID2D1DeviceContext::D rawGlyphRun).
4. Ha TranslateColorGlyphRun a színjelfuttatások meglétét jelenti, akkor az alkalmazásnak figyelmen kívül kell hagynia az elsődleges karakterjel-futtatásokat, és ehelyett a TranslateColorGlyphRun által visszaadott színjelfuttatás(ok) használatát kell használnia. Ehhez iterálja végig a visszaadott IDWriteColorGlyphRunEnumerator1 objektumot, beolvassa az egyes színkódfuttatásokat, és a karakterjel képformátumának megfelelően rajzolja meg (például használhatja DrawColorBitmapGlyphRun és DrawSvgGlyphRun a színes bitképek és SVG-glyphok rajzolásához).

Ez a példakód az eljárás általános szerkezetét mutatja be:

// 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; 
} 

Színes betűtípusok használata XAML-alkalmazásban

A szín betűtípusokat alapértelmezés szerint az XAML-platform szövegelemei támogatják , például TextBlock, TextBox, RichEditBox, Glyphsés FontIcon. A szöveget egyszerűen színes betűtípussal formázhatja, és a színösszetűk minden színben jelennek meg.

Az alábbi szintaxis egy TextBlock stílusának egyik módját mutatja be az alkalmazáshoz csomagolt színes betűtípussal. Ugyanez a technika érvényes a normál betűtípusokra is.

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

Ha azt szeretné, hogy az XAML-szövegelem soha ne többszínű szöveget, állítsa IsColorFontEnabledProperty tulajdonságát false.

Színes betűtípusok használata a Microsoft Edge-ben

A szín betűtípusok alapértelmezés szerint a Microsoft Edge-en futó webhelyeken és webalkalmazásokban jelennek meg, beleértve az XAML WebView2 vezérlőt. Egyszerűen használjon HTML-t és CSS-t a szöveg színes betűtípussal való stílusához, és minden színjel színben jelenik meg.

Színes betűtípusok használata Win2D-vel

A Direct2D-hez hasonlóan a Win2D szöveges rajz API-jai alapértelmezés szerint nem renderelnek színjeleket. Ha engedélyezni szeretné a karakterjelek megjelenítését, állítsa be a EnableColorFont beállításjelölőt abban a szövegformátum-objektumban, amelyben az alkalmazás átadja a szövegrajzolási módszert. Az alábbi példakód bemutatja, hogyan jeleníthet meg egy sztringet színes betűtípusban a Win2D használatával:

// 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
    );

Kapcsolódó témakörök

• ID2D1DeviceContext4::D rawText metódus
• IDWriteFactory4::TranslateColorGlyphRun metódus
• IDWriteFontFace4 interfész
• DirectWrite színes glyph mintaalkalmazás