Перетворити текст на SVG
SVG з елементом <text> залежить від того, чи доступний шрифт там, де файл відкриють. Переведіть текст у дані контурів — і ця залежність зникне: форми їдуть разом із файлом, тож він відображається однаково в будь-якому браузері, редакторі та верстаті, без жодного запиту вебшрифту.
Перетворити текст на SVGЩо ви отримуєте
Один контур на гліф — із правилом заливки, заливкою й обведенням, які ви задали, і з можливістю дати кожному гліфу власний id, щоб звертатися до літер окремо з CSS або JavaScript. Або зваріть контури, коли потрібен єдиний контур на все слово, — форма, яку зазвичай воліють різальний верстат чи система іконок.
Правильне верстання, а не простий пошук гліфів
Текст верстається через HarfBuzz — рушій, яким користуються самі браузери, — тож кернінгові пари й лігатури працюють, а складні писемності поводяться як слід: арабські літери з'єднуються, індійські кластери переставляються. Осі варіативних шрифтів і функції OpenType теж відкриті, тож насиченість або стилістичний набір можна дібрати ще до переведення в криві.
Використайте свій шрифт
У каталозі понад 1900 родин із відкритою ліцензією, а замість них можна закинути власний TTF чи OTF. Завантажені шрифти читаються у вкладці й нікуди не надсилаються, а отже ліцензійна комерційна гарнітура лишається на вашій машині.
Питання
- Чому не лишити текст як <text>?
- Бо він не відмалюється двічі однаково. Відсутній шрифт мовчки підміняється, а вебшрифт додає запит і спалах неоформленого тексту. Контури — це фіксована геометрія, і це виправдано завжди, коли файл є логотипом, іконкою або призначений верстату.
- Чи лишиться текст доступним для пошуку та скрінрідерів?
- Після переведення в криві — ні. Збережіть напис в aria-label або в елементі title вашої розмітки і тримайте редагований оригінал для майбутніх правок.
- Чи можна використати власний ліцензійний шрифт?
- Так — завантажте TTF або OTF. Він розбирається у браузері, тож файл ніколи не покидає вашу машину. Перевірте, чи дозволяє ліцензія переведення в криві для вашого завдання.