Использование цветных шрифтов для красивого текста и значков

В этой публикации мы познакомим вас с текстовой технологией, называемой цветными шрифтами. Мы обсудим что такое цветные шрифты, когда они могут быть полезны и как их использовать в ваших приложениях Windows 10.

Что такое цветные шрифты?

Цветные шрифты, также называемые «многоцветными шрифтами» или «хроматическими шрифтами», представляют собой относительно новую технологию шрифтов, которая позволяет дизайнерам шрифтов использовать несколько цветов внутри каждого символа шрифта. Цветные шрифты позволяют приложениям и веб-сайтам отрисовывать многоцветный текст с меньшим количеством кода и более надежной поддержкой со стороны операционной системы, чем специальные методы, реализованные над областью с текстом.

Большинство шрифтов для чтения и письма — это шрифты, которые вам, вероятно, больше всего знакомы, — это не цветные шрифты. Эти шрифты определяют только форму глифов, которые они содержат, либо с помощью векторных контуров, либо с помощью монохроматических растровых изображений. Во время отрисовки текстовый рендеринг заполняет форму глифа, используя один цвет («цвет шрифта»), указанный в приложении или в визуализируемом документе.

Цветные шрифты, с другой стороны, содержат информацию о цвете в дополнение к информации о форме. Некоторые подходы даже позволяют шрифтам включать несколько цветовых палитр, предоставляя художественную гибкость шрифта. Цветные шрифты обычно включают резервную информацию для платформ, которые не поддерживают цветные шрифты, или для сценариев, в которых функция цвета отключена. В этих ситуациях цветные шрифты отображаются как обычные монохроматические шрифты.

Один цветной шрифт, с которым вы, возможно, знакомы, является Segoe UI Emoji — шрифт по умолчанию, используемый в Windows для отображения эмодзи. Ниже вы можете увидеть пример глифа из Segoe UI Emoji, который отображается в монохромном виде (слева) и в цвете (справа).

Зачем использовать цветные шрифты?

Теперь, когда вы знаете, что такое цветные шрифты, давайте поговорим о том, как они могут быть полезны.

Цветные шрифты изначально были предназначены для создания разноцветных эмодзи в сценариях текстовой коммуникации. Они преуспевают в этой задаче, но они полезны и для других сценариев. Цветные шрифты предлагают способ реализации насыщенных текстовых эффектов с простотой и функциональностью обычных шрифтов. Для приложений и операционной системы текст, отображаемый в цветном шрифте, такой же, как и любой другой текст: его можно скопировать и вставить, проанализировать с помощью инструментов доступности и т.д.

Цветные шрифты — лучшая альтернатива растровой графике для сценариев с форматированным текстом, таких как заголовки веб-сайтов или заголовки разделов документа. Хотя растровая графика обычно используется в этих сценариях, они не хорошо масштабируются для всех размеров дисплея, и они не обеспечивают те же функции доступности, что и реальный текст. Если вы обнаружите, что часто генерируете растровые изображения текста из разноцветных иллюстраций, попробуйте вместо этого использовать цветной шрифт.

Цветные шрифты также могут использоваться для иконографии вашего приложения. Некоторые разработчики приложений предпочитают использовать шрифты значков для автономных файлов изображений из-за удобства и функциональности макета, предлагаемого шрифтами. С цветными шрифтами вы можете упаковать насыщенные, масштабируемые полноцветные значки в один шрифт из значков.

(Примечание. Начиная с обновления Windows 10 Creators Update вы также можете получить масштабируемую векторную иконографику, используя автономные SVG-изображения прямо в вашем приложении XAML. Дополнительные сведения см. в разделе «Векторная иконографика: использование изображений SVG в приложении»).

Какие цветные шрифты поддерживает Windows?

Спецификация OpenType определяет несколько способов вставки информации о цвете шрифта. Начиная с обновления Windows 10 Anniversary Update, Windows поддерживает все эти подходы. Ниже приведены различные подходы.

Векторные цветные шрифты определяют формы глифов с использованием математических кривых и линий. Они могут использовать традиционный синтаксис контура шрифта в сочетании с цветовой палитрой (через таблицы OpenType «COLR» и «CPAL»), или они могут использовать встроенные средства SVG (через таблицу SVG OpenType). Эти форматы превосходны компактности изображения иконок, а являясь векторными они обеспечивают бесконечную масштабируемость.

Цветовые шрифты на основе растровых изображений определяют формы глифов с использованием встроенной растровой графики, такой как изображения PNG. Они могут использовать таблицы OpenType «CBDT» и «CBLC», или они могут использовать таблицу «sbix» OpenType. Этот подход позволяет легко контролировать каждый пиксель формы глифа и обеспечивать фотореалистичный контент, но дизайнеры должны обеспечивать несколько размеров изображений для обеспечения качественного визуального масштабирования.

Использование цветных шрифтов

Цветные шрифты, как с точки зрения разработчика, так и с точки зрения пользователя, являются «просто шрифтами». Они могут быть установлены и удалены из системы так же, как монохроматические шрифты, они могут быть включены в ваш пакет приложений в качестве локального ресурса, или могут использоваться в качестве веб-шрифта на вашем веб-сайте.

В разметке XAML и Microsoft Edge вы можете стилизовать практически любой текст с цветным шрифтом так же, как обычный шрифт, и по умолчанию ваш текст будет отображаться в цвете. Однако, если ваше приложение работает на более низком уровне и вызывает API Direct2D (или API Win2D) для визуализации текста, оно должен явно запрашивать рендеринг цветового шрифта.

Использование цветных шрифтов в XAML

Текстовые элементы разметки XAML (например, TextBlock, TextBox, RichEditBox и FontIcon) по умолчанию поддерживают цветные шрифты. Просто опишите текст с помощью цветного шрифта, и стилизованный текст будет отображаться в цвете. В следующем примере кода показано, как элемент TextBlock задействован с цветным шрифтом, который был упакован с вашими ресурсами приложения (тот же метод применяется к обычным шрифтам).

  1. <TextBlock FontFamily=«Assets/MyColorFont.otf#MyFontFamilyName»>Here is some text.</TextBlock>

Применение цветного шрифта к текстовому блоку XAML

Свойство FontFamily указывает на относительное расположение файла шрифта, который был добавлен в пакет приложения. Поскольку один файл шрифта может содержать несколько семейств шрифтов, вам также необходимо указать желаемое семейство шрифтов, используя хеш-синтаксис, показанный выше.

Если вы не хотите, чтобы ваш текстовый элемент XAML никогда не отображал многоцветный текст, установите для свойства IsColorFontEnabled значение false. Например, вы можете выбрать, чтобы ваше приложение отображало монохромный текст, когда включены функции доступности.

Использование цветных шрифтов в Microsoft Edge

Как и в XAML, Edge поддерживает рендеринг цветных шрифтов по умолчанию на веб-сайтах и в веб-приложениях, включая элемент управления XAML WebView. Просто используйте HTML и CSS для стилизации текста с помощью цветного шрифта, а стилизованный текст будет отображаться в цвете.

Использование цветных шрифтов в Direct2D

В отличие от фреймворков пользовательского интерфейса графические интерфейсы нижнего уровня, такие как Direct2D и DirectWrite, по умолчанию не отображают цветные символы. Это делается для того, чтобы избежать неожиданных изменений поведения в приложениях для текстового рендеринга, которые были разработаны до поддержки цветного шрифта.

Если ваше приложение отображает текст с помощью API DrawText и DrawTextLayout Direct2D, вы должны «выбрать» цветную визуализацию глифов. Для этого передайте флаг D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT в соответствующий метод рисования. В следующем примере кода показано, как вызвать метод DrawText Direct2D для визуализации строки с помощью цветового шрифта:

  1. // If m_textFormat points to a font with color glyphs, then the following
  2. // call will render m_string using the color glyphs available in that font.
  3. // Any monochromatic glyphs will be filled with m_defaultFillBrush.
  4. m_deviceContext->DrawText(
  5. m_string->Data(),
  6. m_string->Length(),
  7. m_textFormat.Get(),
  8. m_layoutRect,
  9. m_defaultFillBrush.Get(),
  10. D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
  11. );

Отрисовывание многоцветного текста с помощью метода DrawText Direct2D

Использование цветных шрифтов в Win2D

Как и Direct2D, API-интерфейсы рисования Win2D по умолчанию не отображают цветные символы.
Чтобы выбрать цветной глиф-рендеринг с помощью Win2D, установите флаг для опции EnableColorFont у объекта текстового формата, к которому ваше приложение применяет метод отрисовки текста. В следующем примере кода показано, как визуализировать строку в цветовом шрифте с помощью Win2D:

  1. // The text format that will be used to draw the text. (Declared elsewhere
  2. // and initialized elsewhere by the app to point to a color font.)
  3. CanvasTextFormat m_textFormat;
  4. // Set the EnableColorFont option.
  5. m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont;
  6. // If m_textFormat points to a font with color glyphs, then the following
  7. // call will render m_string using the color glyphs available in that font.
  8. // Any monochromatic glyphs will be filled with m_color.
  9. drawingSession.DrawText(
  10. m_string,
  11. m_point,
  12. m_color,
  13. m_textFormat
  14. );

Отрисовывание многоцветного текста с помощью метода DrawText в Win2D

Построение цветных шрифтов OpenType SVG

Цветные шрифты — относительно недавняя разработка в технологии шрифтов, поэтому поддержка среди инструментов для создания шрифтов все еще находится на ранней стадии. Не все типы цветных шрифтов поддерживаются всеми инструментами для шрифтов, но поддержка продолжает улучшаться по мере роста использования цветных шрифтов.

Построение шрифта с нуля — сложный процесс, и это больше, чем мы можем осветить в этой публикации. Но цветные шрифты предназначены не только для профессиональных дизайнеров — если вы являетесь разработчиком приложения или веб-дизайнером и у вас значок монохромного шрифта, и вы хотели бы обновить его до цветного шрифта, мы разработали небольшой инструмент, который поможет сделать процесс проще: редактор шрифтов OpenType SVG.

Это приложение позволяет вам использовать существующий шрифт и добавлять цветность, встраивая собственные изображения SVG для каждого глифа, используя простой интерфейс перетаскивания. SVG — популярный формат векторных изображений, поддерживаемый такими инструментами, как Adobe Illustrator и Inkscape. На платформах, поддерживающих шрифты OpenType SVG (например, приложения Windows, Edge и Firefox), отображаются цветные глифы. Другие платформы автоматически возвращаются к монохроматическим символам. Для получения дополнительной информации см. страницу GitHub для редактора шрифтов OpenType SVG.

Инструмент был разработан группой стажеров Microsoft в графической команде Windows. Мы нашли инструмент полезным, поэтому мы сделали его доступным как проект с открытым исходным кодом для других, чтобы окружающие могли его использовать и улучшать.

Итоги

Цветные шрифты — это захватывающая новая технология, которая предоставляет более богатые текстовые сценарии, чем это было возможно ранее, не жертвуя поддержкой платформы для доступности, обратной совместимости, масштабируемости, печати и сложных возможностей шрифтов. Для получения дополнительной информации см. следующие ресурсы:
DirectWrite: цветные шрифты
Образец цветного глифа DirectWrite
Редактор шрифтов OpenType SVG

Перевод оригинальной публикации Using color fonts for beautiful text and icons
Автор: Rick Manning
Перевод: Сергей Урусов

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *