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

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

Вход в учетную запись