Создать комплект веб-шрифтов
Выберите шрифты TTF, OTF, WOFF или WOFF2, чтобы создать файлы WOFF2, CSS и HTML-предпросмотр. Перед добавлением на сайт проверьте образец текста, имя, толщину и стиль CSS, а также отображение при загрузке, затем сохраните комплект в ZIP. Подмножество символов не создаётся.
Что можно сделать
Подготовить комплект файлов для веба
Создавайте WOFF2, CSS и HTML-предпросмотр из TTF, OTF, WOFF или WOFF2. Можно выбрать сразу несколько шрифтов.
Проверить глифы и параметры CSS
Проверьте, как выглядят преобразованные шрифты. При необходимости измените используемые в вебе имена, толщину и стили, а также отображение во время загрузки.
Передать комплект в ZIP
Сохраните папку fonts, fonts.css и preview.html одним комплектом. Используйте их, сохраняя относительное расположение файлов.
Как пользоваться
Выбрать шрифты вместе
Выберите шрифты, которые можно использовать в вебе. Если нужно несколько шрифтов, выберите их одновременно.
Проверить внешний вид и веб-настройки
Введите текст для предпросмотра и проверьте каждый шрифт. Чтобы изменить имя, толщину или другие параметры, откройте настройки CSS этого шрифта.
Создать комплект и сохранить ZIP
Нажмите «Создать комплект веб-шрифтов» и сохраните созданный webfont-kit.zip.
Распаковать и подключить к веб-странице
Распакуйте файлы, сохранив расположение папки fonts, файлов fonts.css и preview.html. Подключите CSS на странице, где будете использовать шрифты, и укажите заданные имена шрифтов.
Когда это полезно
Подготовить сайт к публикации
Объедините шрифты в веб-форматах с CSS и подготовьте файлы, необходимые для интеграции.
Передать полный комплект команде разработки
Объедините несколько шрифтов, например обычное и жирное начертание, и передайте их вместе с HTML, содержащим текст для проверки.
Как взаимодействуют шрифты и CSS
WOFF2 — формат шрифта для веба
Подготовьте WOFF2, содержащий исходные символы. Подмножество символов не создаётся. Размер файла зависит от шрифта.
Зарегистрировать имена, толщину и стили в CSS
Эти настройки определяют, для каких запрошенных стилей в вебе будет использоваться этот шрифт. Они не преобразуют глифы шрифта в жирное или курсивное начертание.
Различать одинаковые имена по толщине и стилю
Для обычного и жирного начертания можно использовать одно имя, но сочетание имени, толщины и стиля не должно повторяться.
Выбрать отображение во время загрузки
По умолчанию сначала отображается резервный шрифт, а после готовности выполняется переключение. При необходимости измените ожидание и переключение в настройках CSS.
Сохранить относительное расположение файлов
В fonts.css указаны ссылки на файлы, например fonts/font-1.woff2. Если вы переместите папку или CSS-файл, скорректируйте пути ссылок.
Часто задаваемые вопросы
Куда поместить созданные файлы?
Распакуйте ZIP, сохранив относительное расположение папки fonts, файлов fonts.css и preview.html. Подключите fonts.css на своей странице и укажите в CSS заданное имя шрифта.
Чем это отличается от простой конвертации формата?
На этой странице WOFF2 объединяется с CSS и HTML-предпросмотром. Если нужно только изменить формат шрифта, воспользуйтесь инструментом «Конвертер форматов шрифтов».
Можно оставить только используемые символы?
Эта страница не выполняет подмножество символов. Она подготавливает шрифты, сохраняющие исходные символы.
Изменение толщины делает символы жирнее?
Настройка задаёт значение толщины, используемое в CSS. Она не изменяет глифы в файле шрифта. Для жирного или курсивного начертания укажите файл с такими глифами.
Можно использовать несколько файлов с одним именем шрифта?
Можно добавить файлы с разной толщиной или стилем. Если совпадает сочетание имени, толщины и стиля, проверьте соответствующие настройки.
Что произойдёт, если выбрать шрифты повторно?
Текущий набор шрифтов и созданный ZIP будут удалены, после чего загрузится новый выбранный набор. Выберите вместе с новыми файлами и те, которые хотите продолжать использовать.
Что делать, если отображаются не все символы образца?
Символы, отсутствующие в шрифте, могут отображаться другим шрифтом. Проверьте поддерживаемые символы и их вид в месте использования шрифта.
Что делать, если шрифт не удаётся загрузить?
Выберите шрифты в поддерживаемом формате ещё раз. Если какой-либо файл из набора нельзя преобразовать или загрузить, частично успешный набор не сохраняется.
Входные данные и результат
- Входные данные
- TTF, OTF, WOFF и WOFF2. Можно выбрать сразу несколько файлов.
- Условия
- Проверьте условия использования исходных шрифтов, включая встраивание в веб-страницы.
- Настройки
- Имя, толщина, стили и отображение при загрузке, используемые в CSS.
- Результат
- webfont-kit.zip. Включает WOFF2, fonts.css и preview.html.