Предпросмотр шрифта — загрузите TTF, WOFF или WOFF2 и просмотрите глифы без установки
Выберите локальный файл шрифта и отрисуйте его контуры в виде SVG прямо в браузере, без предварительной установки шрифта. Вставьте любые символы, которые поддерживает шрифт — латиницу, CJK или знаки, — и просмотрите каждый глиф; текст дедуплицируется и все пробелы удаляются, поэтому вы получаете таблицу глифов, а не наборный оттиск.
Что показывает этот предпросмотр — и чего он намеренно не делает
Без установки, только файл
Выберите файл .ttf, .woff или .woff2 и сразу просмотрите его. В системные шрифты ничего не добавляется, а файл не покидает ваш компьютер.
Контуры в виде SVG, глиф за глифом
fontkit разбирает шрифт в браузере, раскладывает ваш текст и преобразует контур каждого глифа в путь SVG, поэтому вы видите настоящие кривые, а не запасной шрифт браузера.
Любая письменность, которую поддерживает шрифт
Вставляйте латинские, китайские, японские, корейские символы или знаки — всё, для чего в шрифте есть глиф, будет отрисовано, а отсутствующие символы просто ничего не дадут.
Один шрифт за раз, результат перезаписывается
Выбор файла считывает только первый файл, и каждый запуск предпросмотра очищает предыдущую таблицу. Переключать шрифты быстро, но сравнения нескольких шрифтов рядом нет.
Просмотрщик глифов, а не наборный оттиск
Нет элементов управления размером, начертанием, интерлиньяжем или межбуквенным расстоянием. Каждый глиф помещён в фиксированный блок 50×50, а viewBox жёстко задан как 1200×1200 со сдвигом базовой линии, настроенным примерно под 1000 unitsPerEm, поэтому шрифты, созданные в другом масштабе, могут выглядеть крупнее, мельче или смещёнными.
Частые вопросы о предпросмотре шрифта
Какие форматы шрифтов можно просмотреть?
TTF, WOFF и WOFF2 — три расширения, которые принимает выбор файла. Проверено на fontkit 2.0.4: один и тот же шрифт, преобразованный в TTF, WOFF и WOFF2, дал идентичные контуры. OTF нет в списке, хотя fontkit умеет читать файлы OTTO/CFF.
Можно ли просмотреть шрифты, уже установленные в системе?
Нет. Здесь нет списка системных шрифтов и регистрации @font-face; единственный вход — локальный файл, который вы загружаете. Поэтому ничего и не устанавливается: это просмотрщик одного файла шрифта, а не аналог Font Book для вашей установленной библиотеки.
Какие настройки можно изменить?
Только текст предпросмотра. Нет управления размером, начертанием, интерлиньяжем, межбуквенным расстоянием, выравниванием или цветом, а также синтетического полужирного и курсива — вы видите начертание, заложенное в файле.
Можно ли сравнивать несколько языков или наборов символов?
Вы можете вводить или вставлять символы любой письменности, которую поддерживает шрифт, но готовых наборов символов по языкам нет, и сравнить два шрифта рядом тоже нельзя. Повторяющиеся символы объединяются, а все пробелы удаляются, поэтому перед вами набор символов, а не связный текст; сложные письменности вроде арабской не проверяются на соединения или интервалы.
Как ведёт себя крупный CJK-шрифт?
Нормально. Шрифт Song размером 20,9 МБ с 60 455 глифами разобран и отрисован за миллисекунды на этой машине с fontkit, при примерно 117 МБ памяти, и в SVG преобразуются только введённые символы. При этом весь файл всё равно читается в память, а индикатора прогресса и ограничения размера нет.
Всё обрабатывается локально?
Да. Разбор и создание SVG полностью выполняются в вашем браузере через fontkit; файл шрифта никогда не загружается и сетевых запросов не делается, поэтому лицензионные шрифты остаются приватными.
Почему предпросмотр выглядит иначе, чем в моём графическом редакторе?
Потому что это таблица глифов: каждый глиф рисуется в отдельном фиксированном SVG-блоке 50×50, ширина продвижения, кернинг и позиционирование лигатур игнорируются, а viewBox фиксирован на 1200×1200 со сдвигом базовой линии примерно под 1000 unitsPerEm (у проверенных здесь шрифтов было 2048 и 256, поэтому они могут казаться мельче, крупнее или смещёнными). Повреждённый файл лишь оставляет необработанную ошибку в консоли и ничего не показывает на экране.
