Руководство пользователя Отмена

Использование веб-шрифтов с CodePen

  1. Руководство пользователя Adobe Fonts
  2. Введение
    1. Требования к системе и подписке
    2. Поддержка браузеров и ОС
    3. Добавление шрифтов на компьютере
    4. Добавление шрифтов на веб-сайт
    5. Добавление шрифтов в мобильном приложении CC
  3. Лицензирование шрифтов
    1. Шрифты, добавленные из Adobe Fonts
    2. Веб-шрифты из Adobe Fonts
    3. Клиенты Creative Cloud для организаций
    4. Удаленные шрифты
    5. Почему эти шрифты не включены в мою подписку на Creative Cloud?
    6. Почему меня просят приобрести лицензию на шрифты в Adobe Fonts?
    7. Шрифты Adobe Fonts недоступны для идентификаторов Adobe ID, зарегистрированных в Китае
  4. Получение и использование шрифтов
    1. Использование шрифтов Adobe Fonts в приложениях Creative Cloud
    2. Управление шрифтами
    3. Поиск шрифтов из изображений
    4. Обработка отсутствующих шрифтов в приложениях для настольных ПК
    5. Использование шрифтов в InDesign
    6. Шрифты и оформление
    7. Использование веб-шрифтов в документах HTML5 Canvas
    8. Использование шрифтов в InCopy
    9. Использование веб-шрифтов в Muse
    10. Упаковка файлов шрифтов
    11. Руководство по устранению проблем с добавлением шрифтов
    12. Добавленные шрифты не отображаются в меню шрифтов
    13. «Не удается добавить один или несколько шрифтов» или «Уже установлен шрифт с тем же названием»
    14. Что произойдет, если разработчик обновит используемый мной шрифт?
    15. Скрытие шрифтов в программах Adobe
  5. Дизайн и веб-разработка
    1. Добавление шрифтов на веб-сайт
    2. Руководство по устранению неполадок: добавление шрифтов на веб-сайт
    3. Устранение проблем, связанных со шрифтами
    4. Использование веб-шрифтов в HTML-письмах или новостных рассылках
    5. Использование веб-шрифтов с ускоренными мобильными страницами (AMP)
    6. Селекторы CSS
    7. Настройка производительности веб-шрифтов с помощью параметра font-display
    8. Коды встраивания
    9. Динамический поднабор и предоставление веб-шрифтов
    10. События шрифтов
    11. Почему мои веб-шрифты используются с use.typekit.net?
    12. Сайт не может подключиться к use.typekit.net
    13. Использование веб-шрифтов с CodePen
    14. Поддержка браузеров и ОС
    15. Домены
    16. Использование веб-шрифтов при локальной разработке
    17. Политика безопасности контента
    18. Печать веб-шрифтов
  6. Поддержка языка и возможности OpenType
    1. Поддержка языков и поднабор
    2. Использование функций OpenType
    3. Синтаксис для функций OpenType в CSS
  7. Технологии шрифтов
    1. Цветные шрифты OpenType-SVG
    2. Ten Mincho: важные моменты при обновлении с версии 1.000

CodePen представляет собой веб-редактор кода HTML, CSS и JavaScript, который позволяет экспериментировать с кодом прямо в браузере. Вы можете использовать собственные веб-шрифты непосредственно через свой инструмент «Перо».

Выбор шрифтов для использования

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

Добавление кода встраивания в инструмент «Перо»

Код для встраивания можно добавить в пользовательский интерфейс CodePen в поле «Stuff for <head>» в меню настроек редактора HTML или в меню «CSS > Add External CSS»

Чтобы найти код встраивания для своего проекта, посетите страницу веб-проектов и найдите название своего проекта. Скопируйте и вставьте код встраивания CSS по умолчанию для этого проекта в одно из этих мест.

Использование CodePen с кодом встраивания CSS по умолчанию

Использование CodePen путем прямой ссылки на файл CSS

Применение шрифтов в CSS

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

Редактор CodePen с примененным веб-шрифтом

Название семейства шрифтов, которое будет использоваться в CSS, также указано в веб-проекте; узнать больше об использовании шрифтов в CSS.

Данные CSS на странице веб-проекта

Дублирование перьев

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

Удаление проекта или отмена подписки

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

Adobe, Inc.

Получайте помощь быстрее и проще

Новый пользователь?