Проблемы со встроенными шрифтами значков как base64

Мне нужно встроить файл шрифта в строку, который содержит 31 значок, которые я использую для своего приложения.

Поскольку веб-просмотр принимает только одну строку html для отображения представления, я не могу загружать внешние файлы и поэтому решил использовать base 64 для кодирования моего файла шрифта. Шрифт значка был сгенерирован с помощью icomoon, что привело к следующему определению шрифта.

@font-face {
    font-family: 'icons';
    src:  url('icons/icons.eot?nyqxuh');
    src:  url('icons/icons.eot?nyqxuh#iefix') format('embedded-opentype'),
        url('icons/icons.ttf?nyqxuh') format('truetype'),
        url('icons/icons.woff?nyqxuh') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

Все значки отображаются по желанию (в веб-браузере) с использованием оригинальных файлов.

Затем, после этого, я взял шрифт truetype и запустил его через генератор Font Squirrel WebFont с включенным base64encode, теперь мои определения css выглядят так.

@font-face {
    font-family: 'icons';
    src: 
        url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAAR....) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

Однако значки больше не отображаются, и вместо них появляется «отсутствующий значок».

Вот полный base64 для справки.

url(data:font/truetype;charset=utf-8;base64,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) format('truetype');

PS: я использую бэкэнд Edge для веб-просмотра, поэтому я совершенно уверен, что он должен работать.


person Blaine    schedule 24.07.2020    source источник


Ответы (1)


Судя по всему, FontSquirrel не включил мои глифы в результирующий base64. Я не уверен, пропустил ли я какой-то вариант, но я решил это, просто используя base64 на WSL (bash) в файле шрифта ttf и заменив base64.

person Blaine    schedule 25.07.2020