В этой статье вы узнаете, как использовать шрифты Adobe Typekit Web Fonts, Edge Web Fonts и локальные веб-шрифты на веб-страницах.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Использование шрифтов Typekit в Adobe Muse

Веб-шрифты Adobe Typekit теперь доступны в меню «Добавить/удалить шрифт» приложения Adobe Muse.

Вы можете опробовать ограниченное количество шрифтов из библиотеки Typekit на любом уровне плана Creative Cloud, а если у вас есть платная подписка, вы получите полный доступ к библиотеке, содержащей тысячи шрифтов. Дополнительные сведения о планах подписки Typekit см. в статье Планы размещения веб-шрифтов из Typekit.

В отличие от локальных веб-шрифтов Typekit размещает шрифты, которые вы выбрали для использования на веб-сайте. Это означает, что если вы выбираете шрифты из библиотеки Typekit и затем публикуете ваш сайт в приложении Adobe Muse, Typekit автоматически разместит эти шрифты на сервере Typekit и подключит вашу учетную запись Typekit к вашему веб-сайту.

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

  1. В приложении Adobe Muse выберите Файл > Добавить/удалить веб-шрифты.

    FileAddRemoveWebFonts
  2. Вкладка Typekit в диалоговом окне Add Web Fonts содержит список всех веб-шрифтов Typekit, доступных для вашего типа учетной записи Creative Cloud.

    AddWebFonts
  3. Найти шрифт, который наиболее соответствует вашим дизайнерским потребностям. Для выбора подходящего шрифта можно использовать параметры сортировки и фильтрации.

    • Нажмите кнопку для сортировки шрифтов по следующим параметрам: Избранное, Новейшие и Имена.
    SortTypekitFonts
    • Нажмите Фильтр, чтобы воспользоваться следующими фильтрами:
      • Классификация: шрифты Typekit можно фильтровать по их классификациям, например, шрифты с засечками, без засечек, рукописные стили и т. д.
      • Рекомендуется для: фильтрация шрифтов на основе рекомендаций Typekit для абзаца или заголовка.
      • Свойства: фильтрация на основе таких свойств, как толщина, ширина, высота и т. д.
    AddWebFontsFilters
  4. Найдя необходимый шрифт, просто нажмите его. Флажок рядом со шрифтом обозначает, что шрифт выбран. При необходимости одновременно можно выбрать несколько шрифтов для добавления. На вкладке Выбранные шрифты отображаются все выбранные шрифты.

    SelectedTypekitWebFonts
  5. Нажмите кнопку «ОК». Откроется диалоговое окно «Уведомление о веб-шрифтах» с подтверждением, что новые веб-шрифты были добавлены. При необходимости выберите Не показывать снова.

    fig_07_type
    Нажмите кнопку «ОК» для закрытия подтверждения.

    Теперь при следующем выборе параметра «Веб-шрифты» в меню «Шрифты» будет отображаться список добавленных шрифтов.

    FileAddRemoveWebFonts

Применение шрифтов Typekit к тексту

  1. В приложении Adobe Muse выберите текст, к которому необходимо применить шрифт Typekit.

    TextForEdgeWebFont
  2. Пока текст выбран, в меню «Шрифт» выберите шрифт Typekit, который необходимо применить.

    ApplyTypekitFont

Использование веб-шрифтов Edge Web Fonts в Adobe Muse

Веб-шрифты предоставляют возможность выбора из нескольких сотен шрифтов в большой интернет-библиотеке, размещенной на сайте Typekit.com. Библиотека веб-шрифтов входит в приложение Adobe Muse на основе вашей подписки Adobe Muse. Вам не нужно регистрироваться или приобретать учетную запись Typekit, чтобы получить доступ к шрифтам для их использования в веб-проектировании.

Примечание. Если у вас есть учетная запись Typekit, вы заметите, что набор веб-шрифтов, доступный в настоящее время в приложении Adobe Muse, отличается от набора шрифтов, доступного на сайте typekit.com. В приложении Adobe Muse представлены бесплатные веб-шрифты, на которые не распространяются ограничения. Для их использования не требуется учетная запись Typekit. Веб-шрифты, предлагаемые по учетной записи Typekit, предоставляются с учетом использования и доступа. В следующих версиях Adobe Muse будет предоставлена возможность доступа к библиотеке шрифтов Typekit из рабочей среды Adobe Muse, однако в настоящее время эта функция недоступна.

К преимуществам использования веб-шрифтов можно отнести следующие:

  • возможность выбора уникальных и стилизованных шрифтов для оформления текстового содержимого, даже если эти шрифты не установлены на компьютере;.
  • Веб-шрифты, применяемые к тексту, автоматически связываются со страницами при публикации, экспорте или предварительном просмотре сайта.
  • Шрифты размещены на сайте Typekit.com. Когда посетители просматривают опубликованный сайт в браузере, шрифт загружается незаметно для отображения текста..

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

Соблюдайте осторожность при добавлении веб-шрифтов в свой проект. Добавление слишком большого количества веб-шрифтов может увеличить время загрузки сайта и замедлить его работу в целом, что повлияет на взаимодействие пользователя с сайтом. В связи с этим рекомендуется применять не более 1–2 семейств шрифтов с 4 стилями на каждую семью. Поскольку веб-шрифты являются удаленными ресурсами (как изображения и видео), они должны загружаться в кэш браузера посетителя при просмотре им страниц сайта.

Еще одна функция приложения Adobe Muse — отслеживание всех веб-шрифтов, используемых на сайте. Если вы удалите веб-шрифт, который используется в файле .muse, он сохранится в списке в меню «Шрифт» при следующем открытии файла .muse. Поэтому случайное удаление необходимого для сайта шрифта исключено, и вам не нужно вручную отслеживать шрифты, используемые при проектировании страниц.

Добавление веб-шрифтов Edge Web Fonts в проект Adobe Muse

Выполните следующие шаги для добавления нового веб-шрифта.

Откроется новое окно с библиотекой веб-шрифтов.

  1. С помощью инструмента «Текст» выделите текст в текстовом фрейме.

  2. В меню «Шрифт» (на панели элементов управления или на панели «Текст») выберите «Веб-шрифты» > «Добавить веб-шрифты...».

    EdgeWebFontsLibrary
    Библиотека веб-шрифтов предоставляет доступ к сотням шрифтов, которые можно применить к страницам.

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

  3. Найдя необходимый шрифт, просто нажмите его. Флажок рядом со шрифтом обозначает, что шрифт выбран. При необходимости одновременно можно выбрать несколько шрифтов для добавления.

    SelectedEdgeWebFonts
    Рядом с выбранным шрифтом для добавления отображается флажок.

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

    EdgeWebFontsFilters
    Просмотр списка шрифтов, наиболее подходящих для заголовков.

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

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

  4. Выбрав все необходимые шрифты для добавления, нажмите кнопку «ОК».

  5. Нажмите кнопку «ОК».

    При необходимости установите флажок «Не показывать снова».

    fig_07_type
    Нажмите кнопку «ОК» для закрытия подтверждения.

    Теперь при следующем выборе параметра «Веб-шрифты» в меню «Шрифты» будет отображаться список добавленных шрифтов.

    EdgeWebFonts
    Выбор команды «Добавить веб-шрифты» в разделе «Веб-шрифты» меню «Шрифты».

Добавление и применение веб-шрифтов Edge Web Fonts

  1. В приложении Adobe Muse выберите текст, к которому необходимо применить веб-шрифт Edge.

    TextForEdgeWebFont
  2. В меню «Шрифт» выберите веб-шрифт Edge, который необходимо применить.

    ApplyEdgeWebFonts

Использование локальных веб-шрифтов в Adobe Muse

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

Веб-шрифты должны загружаться с сервера, например размещенного в Adobe Edge Web Fonts (предоставлено Typekit). В качестве альтернативы его можно сохранить на том же веб-сервере, на котором размещено содержимое вашего сайта. Данный подход к размещению и рендерингу веб-шрифтов в реальном времени во время посещения сайта называется локальным размещением, а полученные таким образом шрифты — локальными веб-шрифтами Adobe.

Необходимые условия

При работе с локальными веб-шрифтами необходимы шрифты следующих типов:

Системные шрифты

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

  • шрифты True Type (.ttf),
  • шрифты Open Type (.otf),
  • коллекции True Type (.ttc),
  • шрифты Mac Data Fork (.dfont),
  • наборы шрифтов Mac Resource Fork TrueType.

Веб-шрифты

используются при рендеринге вашего сайта в браузере. Для рендеринга шрифтов во всех браузерах в Adobe Muse требуется получить следующие форматы веб-шрифтов:

  • Web Open Font Format (.woff),
  • Embedded OpenType (.eot),
  • Scalable Vector Graphics (.svg). Этот формат необходим для более старых устройств на базе Android.

 

Добавить локальные веб-шрифты

  1. Выберите Файл > Добавить/удалить веб-шрифты, чтобы открыть диалоговое окно «Добавить веб-шрифты».

  2. В диалоговом окне «Добавить веб-шрифты» перейдите на вкладку «Локальные веб-шрифты».

    SelfHostedWebFontsDialog
  3. Найдите и выберите папку с нужным шрифтом или перетащите шрифт в окно «Добавить веб-шрифты». При обнаружении веб-шрифтов Adobe Muse отображает соответствующий запрос. Если некоторые веб-шрифты уже были добавлены ранее, нажмите кнопку + Добавить шрифты, чтобы продолжить.

    SelfHostedWebFontsFound
  4. Adobe Muse выполняет поиск файлов веб-шрифтов в указанной папке и автоматически сопоставляет их с соответствующими системными шрифтами. Подтвердите, что веб-шрифт правильно лицензирован, и нажмите Продолжить.

  5. Автоматически активируется режим управления, а затем отобразится список добавленных веб-шрифтов.

    ManageModeSelfHostedWebFonts

Управление локальными веб-шрифтами

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

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

Указание соответствующего шрифта настольного компьютера

Иногда Adobe Muse не удается автоматически сопоставить веб-шрифт с соответствующим шрифтом настольного компьютера. В этом случае требуется явно указать соответствие для веб-шрифта. Чтобы определить соответствие для веб-шрифта, выполните следующие действия:

  1. Нажмите кнопку , чтобы открыть диалоговое окно для выбранного шрифта.

  2. Нажмите кнопку «Сопоставить», чтобы отобразить список шрифтов, установленных в системе.

  3. Выберите соответствующий системный шрифт, прокручивая список или фильтруя по имени. Нажмите кнопку «ОК», чтобы подтвердить соответствие.

Указание отсутствующих файлов шрифтов

Если Adobe Muse не удалось автоматически найти файлы .eot или .svg, соответствующие файлу .woff, это можно сделать вручную. Чтобы найти отсутствующий файл шрифта, нажмите кнопку рядом с именем шрифта. Нажмите кнопку Обзор и перейдите к отсутствующему файлу. Нажмите кнопку «ОК» для добавления отсутствующего файла.

Разные задачи

  • Предоставление информации о лицензии: нажмите кнопку рядом с именем шрифта, который требуется изменить, и укажите информацию о лицензии. Нажмите кнопку «ОК».
  • Удаление шрифтов: выберите шрифт, который требуется удалить, и нажмите кнопку «ОК».
  • Фильтрация списка шрифтов: для фильтрации списка шрифтов необходимо в текстовом поле «Фильтр» ввести некоторые или все буквы из названия шрифта.

Просмотр локальных веб-шрифтов

Если локальные веб-шрифты были добавлены ранее, при открытии диалогового окна «Добавить веб-шрифт» автоматически активируется режим обзора. В этом режиме предоставляются миниатюры с предварительным изображением шрифтов (сгруппированные по семействам) и можно выбрать шрифты для добавления в раскрывающийся список «Шрифты». По умолчанию все недавно добавленные локальные шрифты включаются в раскрывающийся список «Шрифты», если не было никаких проблем, таких как отсутствие файлов шрифтов или соответствия шрифтам настольного компьютера. Также можно фильтровать семейства шрифтов по имени или отображать только выбранные элементы. 

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет