Base64 в шрифт

Как декодировать шрифт из Base64

1. Вставьте в поле Base64 или data URI одно из трёх: чистый Base64, data URI вроде data:font/woff2;base64,d09GMg… или CSS, в котором он есть. Если в правиле несколько записей src, используется первый data URI.
2. Превью показывает шрифт на панграмме «The quick brown fox jumps over the lazy dog 0123456789» и строке с полным алфавитом. Чтобы попробовать свои слова, печатайте в поле Пример текста.
3. В сведениях показано, что файл шрифта сообщает о себе: Семейство шрифта, Начертание, Полное имя, Версия, Глифы и Единиц на em.
4. Нажмите Скачать файл, чтобы сохранить шрифт с расширением его формата.

Если браузер принял шрифт, в строке статуса под сведениями написано «Отрисовано декодированным шрифтом.» Шрифт регистрируется под служебным именем только для этой страницы и удаляется, когда вы декодируете что-то другое; политика безопасности контента (CSP) страницы не пропускает никакого сетевого трафика, кроме счётчика просмотров Cloudflare, так что файл никуда не уходит.

Форматы и что инструмент из них читает

Для WOFF2 в строке семейства написано «не прочитано (таблицы WOFF2 сжаты Brotli)»: сама страница Brotli не распаковывает, а движок шрифтов браузера, который это умеет, оставляет результат при себе. На отрисовку это не влияет, так что проверить, правильно ли выглядит шрифт, всё равно можно. Чтобы прочитать имена после сохранения, используйте fc-scan из fontconfig, который понимает WOFF2:

fc-scan --format "%{family}: %{style}\n" font.woff2

Для шрифта Material Icons он выведет Material Icons: Regular.

Если шрифт не отрисовывается

Сообщение «Браузер не принял этот шрифт. Возможно, файл повреждён или это не шрифт.» означает, что санитайзер шрифтов браузера отверг файл. Chrome и Firefox перед использованием проверяют каждый веб-шрифт на структурные ошибки, и шрифт, который обрезан или вырезан из большего файла не по тому смещению, эту проверку не проходит. Сравните декодированный размер с исходным; строка Base64 без конца декодируется в шрифт со сломанной последней таблицей.

Если сведения показывают имена, а пример остаётся пустым, в шрифте нет глифов для того, что вы набрали. Так бывает с такими шрифтами:

• Иконочные шрифты. Их символы лежат в области частного использования, начиная с U+E000. Шрифты с лигатурами, в том числе Material Icons, показывают иконку, если набрать её название, например home.
• Урезанные шрифты. Веб-страницы часто встраивают только нужные им символы, иногда несколько десятков. Поле Глифы показывает, сколько их в файле.
• Шрифты для других алфавитов. В шрифте для арабского письма или деванагари может не быть латиницы, а во многих латинских шрифтах нет кириллицы.

Если данные вообще не шрифт, подсказка назовёт формат: «Похоже на PDF, а не на шрифт.» и так далее, с подходящей кнопкой скачивания.

Откуда берутся шрифты в Base64

Чаще всего из CSS. Сборщики встраивают небольшие шрифты в таблицы стилей как URI data:, и так же несут свои шрифты однофайловые HTML-экспорты, офлайн-отчёты и SVG с текстом. У встраивания есть цена: встроенный шрифт нельзя закешировать отдельно от таблицы стилей (подробности в статье производительность data URI). Чтобы превратить файл шрифта в такое правило, используйте шрифт в Base64.

Как извлечь все шрифты из таблицы стилей на Python

Инструмент декодирует первый найденный data URI. Для таблицы стилей с несколькими встроенными шрифтами короткий скрипт сохранит их все с правильными расширениями:

import base64, re

SIGNATURES = {b"wOF2": "woff2", b"wOFF": "woff", b"OTTO": "otf", b"\x00\x01\x00\x00": "ttf", b"ttcf": "ttc"}

css = open("icons.css").read()
pattern = r"data:[^;,]*(?:;[^;,]*)*;base64,([A-Za-z0-9+/=\s]+)"
for i, b64 in enumerate(re.findall(pattern, css)):
    data = base64.b64decode(b64)
    ext = SIGNATURES.get(data[:4], "bin")
    with open(f"font-{i}.{ext}", "wb") as f:
        f.write(data)
    print(f"font-{i}.{ext}", len(data), "bytes")

Расширение определяется по первым четырём байтам, потому что в таблицах стилей шрифты часто подписаны небрежно (application/font-woff, application/octet-stream). Подробнее в статье Base64 в Python.

Вопросы и ответы