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