Встраивание пользовательских шрифтов

  • Статья

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

  • Файл шрифта WOFF (Web Open Font Format)

  • Файл шрифта EOT (Embedded OpenType)

  • Файл шрифта TTF (True Type) или OTF (Open Type) с параметром встраиваемости шрифта Устанавливаемый

    Для определения параметра встраиваемости того или иного шрифта щелкните файл шрифта правой кнопкой мыши, выберите Свойства, а затем щелкните вкладку Сведения, на которой отображаются тип и параметры встраиваемости шрифта.

    Внедрение шрифтов в Blend

Важно!

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

В этом разделе приведены следующие сведения.

Добавление файла шрифта в проект

Добавить файл шрифта в проект можно следующими способами.

  • Открыть меню Проект и щелкнуть Добавить существующий элемент

  • Нажать сочетание клавиш Ctrl+I

  • Копирование и вставка

  • Перетащить

Важно!

Для добавления файлов из папки "Шрифты" (c:\windows\fonts) требуются административные разрешения на локальном компьютере.

Не требуется создавать папку в проекте для внедряемого файла (или файлов) шрифтов, однако рекомендуется это сделать.

Создание папки

  • Щелкните правой кнопкой мыши на панели Проекты, выберите Добавить новую папку, а затем назовите папку шрифты.

Добавление файлов шрифтов

  1. С выбранной на панели Проекты папкой Шрифты откройте меню Проект и выберите Добавить существующий элемент (сочетание клавиш Ctrl+I).

  2. В диалоговом окне Добавление существующего элемента щелкните файлы шрифтов для добавления и нажмите кнопку Открыть.

    Совет

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

  3. На этом этапе можно сделать следующее.

    • Щелкните Отмена, если не требуется добавлять шрифты в новое или имеющееся правило @font-face. Файлы шрифтов добавятся в проект, однако правило @font-face не будет создано.

    • Снимите флажок Создать правило @font-face для этих шрифтов и нажмите кнопку ОК, если требуется добавить шрифты к существующему правилу @font-face.

    • Убедитесь, что установлен флажок Создать правило @font-face для этих шрифтов, если требуется создать правило @font-face, нацеленное на только что добавленные шрифты.

      Примечание

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

    Добавление выбранных шрифтов в Blend

  4. Перейдите к следующему разделу для создания правила @font-face, ориентированного на только что добавленные шрифты.

Создание правила @font-face

Для предоставления доступа к пользовательскому шрифту в приложении необходимо создать правило @font-face. Правило @font-face может быть ориентировано на семейство шрифтов (например, стандартную, полужирную версию шрифта и курсив) или одно начертание шрифта (например, только версия шрифта курсивом). Каждое начертание реализовано в файле шрифтов.

Limelight составляет один файл шрифта.Quicksand составляет шесть файлов шрифта.Значок стопки файлов указывает, что система шрифтов включает несколько начертаний.

@font-face в Blend

Например, если необходимо использовать шрифт Quicksand Regular, создайте правило @font-face со свойством font-family равным Quicksand.

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

Если необходимо использовать Quicksand Bold для всего текста, который должен был выделен полужирным шрифтом, создайте дополнительное правило @font-face со свойством font-family равным Quicksand и свойством font-weight равным bold.

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

@font-face {
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Bold.otf') format('opentype');
       font-weight: bold;
}

В Blend можно создать или редактировать правило @font-face, выполнив одно из следующих действий.

  • В диалоговом окне Добавление существующего элемента убедитесь, что установлен флажок Создать правило @font-face для этих шрифтов, и нажмите кнопку ОК. (См. шаг 3 в предыдущей процедуре).

  • В области Проекты щелкните правой кнопкой мыши файл шрифта, а затем нажмите **Создать новое правило @font-face** или **Добавить к существующему правилу @font-face**.

  • В панели Правила стилей щелкните правой кнопкой мыши CSS-файл, щелкните Добавить правило @, а затем щелкните **Добавить правило @font-face**.

  • В панели Правила стилей щелкните правой кнопкой мыши правило @font-face, а затем щелкните Изменить правило @.

Каждый из этих вариантов открывает редактор @font-face, где определяются свойства правила @font-face.

В следующей процедуре показано создание правила @font-face для Quicksand Bold.

Создание правила @font-face

  1. Примечание

    Эта процедура является продолжением процедуры "Добавление файлов шрифтов" в предыдущем разделе.

    В диалоговом окне **Добавить выделенные шрифты в правило @font-face** убедитесь, что установлен флажок Создать правило @font-face для этих шрифтов, и нажмите кнопку ОК.

    При добавлении нескольких файлов одновременно редактор @font-face включает все файлы начертания шрифтов как файлы исходного кода для семейства шрифтов, а имя font-family аналогично первому файлу в списке добавленных файлов. Однако необходимо ориентироваться на конкретный файл начертания шрифта и задать свойства для этого файла.

  2. В поле семейство шрифтов введите Quicksand.

  3. В списке src удалите файлы исходного кода, щелкнув знак минуса (-) справа от каждого из файлов исходного кода. Делайте это до тех пор, пока в списке не останется только файл Quicksand-Bold.otf.

    Если случайно удален файл Quicksand-Bold.otf, можно добавить его снова, щелкнув значок Добавить источник и выбрав opentype. В списке opentype щелкните Quicksand-Bold.otf.

  4. В списке Насыщенность выберите полужирный, а затем нажмите кнопку ОК.

    Добавление правила <span class=@font-face в Blend" title="Добавление правила @font-face в Blend" />

  5. Для создания дополнительных правил @font-face, ориентированных на разные файлы начертания шрифтов, щелкните правой кнопкой нужный файл шрифта на панели Свойства, а затем повторите шаги со 2 по 4.

Совет

При создании правила @font-face оно добавляется после точки вставки в активный CSS-файл.Желтая линия на панели Правила стилей обозначает точку вставки.

Применение пользовательского шрифт в выделенный фрагмент текста

После добавления пользовательского шрифта в проект и создания правила @font-face можно применить шрифт, выбрав его из раздела **Шрифты @font-face** в раскрывающемся списке Семейство шрифтов на панели Свойства CSS.

В следующей процедуре шрифт Limelight добавляется в проект приложения для просмотра фильмов PickaFlick от Создание первого приложения для Магазина Windows с помощью Blend, часть 1: эталонная страница (HTML и JavaScript).

Применение пользовательского шрифта

  1. Выделите текст, к которому требуется применить пользовательский шрифт.

  2. В категории Шрифт панели Свойства CSS щелкните новый шрифт в списке семейство шрифтов.

    Совет

    Обратите внимание, что список Шрифты @font-face теперь включает добавленные шрифты.

    Раскрывающийся список font-family с пользовательским шрифтом в Blend

    Заданный текст отображается шрифтом @font-face.

    Пользовательский шрифт до и после в Blend