Read this article in your language IT | EN | DE | ES
Вашему вниманию представлена текстовая технология, называемая цветными шрифтами. Обсудим, что такое цветные шрифты, когда они могут быть полезны и как их использовать в приложениях Windows 10.
Что такое цветные шрифты?
Цветные шрифты, также называемые «многоцветными шрифтами» или «хроматическими шрифтами» - это относительно новая технология шрифтов, которая позволяет дизайнерам шрифтов использовать несколько цветов в каждом символическом знаке. Цветные шрифты позволяют приложениям и веб-сайтам рисовать многоцветный текст с меньшим количеством кода и более надежной поддержкой операционных систем, чем специальные технологии, реализованные над текстовым стеком.
Большинство шрифтов для чтения и письма - шрифты, с которыми вы, вероятно, знакомы, - это не цветные шрифты. Эти шрифты определяют только форму глифов, которые они содержат, либо с векторными контурами, либо с монохроматическими растровыми изображениями. Во время рисования текстовый рендеринг заполняет форму глифа (символического знака), используя один цвет («цвет шрифта»), указанный приложением или визуализируемым документом.
С другой стороны, цветные шрифты содержат информацию о цвете в дополнение к информации о форме. Некоторые подходы даже позволяют шрифтам включать несколько цветовых палитр, предоставляя художественную гибкость шрифта. Цветные шрифты обычно включают резервную информацию для платформ, которые не поддерживают цветные шрифты, или для сценариев, в которых функция цвета отключена. В этих ситуациях цветные шрифты отображаются как обычные - монохромные.
Один цветной шрифт, с которым вы, возможно, знакомы, является Segoe UI Emoji - шрифт по умолчанию, используемый в Windows для отображения emoji. Ниже вы можете увидеть пример глифа из Segoe UI Emoji, который отображается монохромно (слева) и в цвете (справа).
Зачем использовать цветные шрифты?
Теперь, когда вы знаете, что такое цветные шрифты, давайте поговорим о том, чем они могут быть полезны.
Цветные шрифты изначально были предназначены для создания разноцветных эмоджи в сценариях текстовой коммуникации. Они очень полезны для этой задачи, но также и для других сценариев. Цветные шрифты предлагают способ реализации насыщенных текстовых эффектов с простотой и функциональностью обычных шрифтов. Для приложений и операционной системы текст, отображаемый в цветовом шрифте, такой же, как и любой другой текст: его можно скопировать и вставить, проанализировать с помощью инструментов доступности и т. д.
Цветные шрифты - лучшая альтернатива растровой графике для сценариев с богатым текстом, таких как заголовки веб-сайтов или заголовки разделов документа. Хотя растровая графика обычно используется в этих сценариях, они не очень хорошо масштабируются для всех размеров дисплея, и они не обеспечивают такие же возможности доступа, как реальный текст. Если вы обнаружите, что часто генерируете растровые изображения из разноцветных произведений, попробуйте вместо этого использовать цветной шрифт.
Цветные шрифты также могут использоваться для иконографии вашего приложения. Некоторые разработчики приложений предпочитают использовать иконки в автономных файлах изображений из-за удобства и макета, предлагаемых шрифтами. С цветными шрифтами вы можете заполнять насыщенные, масштабируемые полноцветные иконки в одну иконку шрифта.
Какие цветные шрифты поддерживаются Windows?
Спецификация OpenType определяет несколько способов вставки информации о цвете шрифта. Начиная с обновления Windows 10 Anniversary Update, Windows поддерживает все эти подходы. Ниже приведены различные подходы.
Цветные шрифты на основе вектора определяют формы глифов, используя математические кривые и линии. Они могут использовать традиционный синтаксис контура шрифта в сочетании с цветовой палитрой (через таблицы OpenType «COLR» и «CPAL»), или они могут использовать встроенные средства SVG (через таблицу OpenGype SVG). Эти форматы преуспевают в представлении большей части иконографии компактно, и в качестве векторов они обеспечивают бесконечную масштабируемость.
Цветные шрифты на основе растровых изображений определяют формы глифов с использованием встроенной растровой графики, например изображений PNG. Они могут использовать таблицы OpenType «CBDT» и «CBLC», или они могут использовать таблицу «sbix» OpenType. Такой подход позволяет легко контролировать каждый пиксель формы глифа и обеспечивать фотореалистичный контент, но дизайнеры должны обеспечивать несколько размеров изображений для высококачественного визуального масштабирования.
Использование цветных шрифтов
Цветные шрифты, как с точки зрения разработчика, так и с точки зрения пользователя, являются «просто шрифтами». Их можно установить и удалить из системы так же, как монохромные шрифты, они могут быть включены в ваш пакет приложения в качестве локального актива или они могут использоваться в качестве веб-шрифта на вашем веб-сайте.
В рамках XAML и Microsoft Edge вы можете создавать практически любой текст с цветным шрифтом так же, как обычный шрифт, и ваш текст будет отображаться в цвете по умолчанию. Однако, если ваше приложение работает на более низком уровне и вызывает API Direct2D (или API Win2D) для рендеринга его текста, тогда он должен явно запрашивать рендеринг цветового шрифта.
Использование цветных шрифтов
Цветные шрифты, как с точки зрения разработчика, так и с точки зрения пользователя, являются «просто шрифтами». Их можно установить и удалить из системы так же, как монохромные шрифты, они могут быть включены в ваш пакет приложения в качестве локального актива или они могут использоваться в качестве веб-шрифта на вашем веб-сайте.
В рамках XAML и Microsoft Edge вы можете создавать практически любой текст с цветным шрифтом так же, как обычный шрифт, и ваш текст будет отображаться в цвете по умолчанию. Однако, если ваше приложение работает на более низком уровне и вызывает API Direct2D (или API Win2D) для рендеринга его текста, тогда он должен явно запрашивать рендеринг цветового шрифта.
Использование цветных шрифтов в XAML
Текстовые элементы для платформы XAML (например,
TextBlock,
TextBox,
RichEditBox и
FontIcon) по умолчанию поддерживают цветные шрифты. Просто нарисуйте текст с помощью цветного шрифта, и стилизованный текст будет отображаться в цвете. В следующем примере кода показано, как модернизировать TextBlock с цветным шрифтом, который был упакован с вашими активами приложения. (Этот же метод применяется и к обычным шрифтам.)
Применение цветного шрифта к XAML TextBlock
Свойство FontFamily указывает на относительное расположение файла шрифта, который был добавлен в пакет приложения. Поскольку один файл шрифта может содержать несколько семейств шрифтов, вам также необходимо указать желаемое семейство шрифтов, используя синтаксис хэша, показанный выше.
Если вы не хотите, чтобы ваш текстовый элемент XAML отображал многоцветный текст, установите для свойства
IsColorFontEnabled значение
false. Например, вы можете выбрать, чтобы ваше приложение отображало монохромный текст, когда включены функции доступности.
Использование цветных шрифтов в Direct2D
В отличие от интерфейсов рамок, графические интерфейсы нижнего уровня, такие как Direct2D и DirectWrite, не отображают цветные символы по умолчанию. Это делается для того, чтобы избежать неожиданных изменений поведения в приложениях для текстового рендеринга, которые были разработаны до поддержки цветных шрифтов.
Если ваше приложение отображает текст с помощью API-интерфейсов DrawText и DrawTextLayout Direct2D, вы должны «выбрать» цветную визуализацию глифов. Для этого переместите флаг
D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT в соответствующий метод рисования. В следующем примере кода показано, как вызвать метод DrawText Direct2D для визуализации строки в цветовом шрифте:
// 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 filled 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
);
Рисование многоцветного текста с помощью метода Direct2D DrawText
Использование цветных шрифтов в Win2D
Как и Direct2D, API-интерфейсы рисования Win2D не отображают цветные глифы по умолчанию.
Чтобы выбрать цветную визуализацию глифов с помощью Win2D, установите флаг опций
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 filled with m_color.
drawingSession.DrawText(
m_string,
m_point,
m_color,
m_textFormat
);
Рисование многоцветного текста с помощью метода Win2D DrawText
Построение цветных шрифтов OpenType SVG
Цветные шрифты - относительно недавняя разработка в технологии шрифтов, поэтому поддержка среди инструментов для создания шрифтов все еще находится на ранней стадии. Не все типы цветных шрифтов поддерживаются всеми инструментами шрифтов, но поддержка продолжает улучшаться по мере роста цветных шрифтов.
Построение шрифта с нуля - сложный процесс, который включает в себя намного больше, чем было представлено в этом посте. Но цветные шрифты предназначены не только для профессиональных дизайнеров - если вы являетесь разработчиком приложения или веб-дизайнером с монохромным шрифтом иконок, и вы хотите обновить его до цветного шрифта, мы разработали небольшой инструмент, который поможет сделать процесс проще:
редактор шрифтов OpenType SVG.
Это приложение позволяет вам использовать существующий шрифт и добавлять цвет, встраивая собственные изображения SVG для каждого глифа, используя простой интерфейс перетаскивания. SVG - популярный формат векторного искусства, поддерживаемый такими инструментами, как Adobe Illustrator и Inkscape. На платформах, поддерживающих шрифты OpenType SVG (например, приложения Windows, Edge и Firefox), отображаются глифы цвета. Другие платформы автоматически возвращаются к монохроматическим символам. Для получения дополнительной информации см.
cтраницу GitHub для редактора шрифтов OpenType SVG.
Инструмент был разработан группой стажеров Microsoft в графическом отделе Windows. Microsoft считает, что этот инструмент полезен, поэтому они сделали его доступнымым проектом с открытым исходным кодом для других, чтобы использовать и улучшать.
Вывод
Цветные шрифты - это новая захватывающая технология, которая открывает более богатые текстовые сценарии, чем это было возможно ранее, не жертвуя поддержкой платформы для доступности, резервного копирования, масштабируемости, печати и сложных возможностей шрифтов. Для получения дополнительной информации см. следующие ресурсы: