Могу ли я преобразовать встроенный шрифт в кодировке base64 в файл шрифта?

У меня есть правило @font-face, и оно выглядит так:

@font-face{
    font-family:'F';
src:url("") format("embedded-opentype"),
url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA ... ETC... ETC

Могу ли я преобразовать это в файл шрифта?

Спасибо!


fonts typeconverter font-face
person mauriblint    schedule 21.09.2012    source источник

Ответы (3)


arrow_upward
44
arrow_downward

Скопируйте часть в кодировке base64 и преобразуйте ее. Есть много способов сделать это.

Линукс

base64 -d base64_encoded_font.txt > font.woff

Mac OS X

openssl base64 -d -in base64_encoded_font.txt -out font.woff

Windows

Перейдите по адресу http://www.motobit.com/util/base64-decoder-encoder.asp и вставьте текст. Выберите «декодировать данные из строки Base64 (декодирование base64)» и «экспортировать в двоичный файл».

person mcrumley    schedule 21.09.2012
comment
Спасибо. Я попробовал метод Windows - отличный инструмент (который, возможно, нуждается в помощи графического дизайнера :) После того, как я назвал свой файл myfont.woff, я перешел к font-squirrel и преобразовал все шрифты, которые мне нужны (.eot, .ttf и т. д. и т. д.) . - person Leopold Kristjansson; 25.02.2014
comment
Я работаю в OS X, и метод openssl у меня не сработал, но решение для Linux с использованием base64 сработало (с использованием параметра -D вместо -d) - person keithjgrant; 15.02.2017

arrow_upward
4
arrow_downward

Ответ @mcrumley правильный, но для тех из вас, кто не может понять это и/или боится командной строки, у меня есть альтернативный метод.

Я только что погуглил ваш вопрос и нашел http://base64converter.com/, который может конвертировать/декодировать (и кодировать) любой файл base64 обратно в исходный формат. Раньше я использовал его для кодирования и декодирования изображений base64, но это была моя первая попытка со шрифтом. В качестве теста я подключил встроенную информацию о шрифте base64, которую нашел в css-файле случайной веб-страницы. Вам не нужна вся запись, оставьте информацию CSS, иначе преобразование завершится ошибкой.

  1. (Например) удалите эту информацию, предшествующую base64:

    @font-face{font-family:"Example";src:url(data:application/x-font-woff;base64,

  2. Удалите это с конца:

    ;font-weight:400;font-style:normal}

  3. У вас останутся данные в кодировке base64, вставьте их в поле «Ввод», выберите «Декодировать» для вывода и нажмите кнопку. Он создаст файл с именем download.bin : щелкните его, чтобы загрузить. Затем измените расширение файла с bin на woff (ваш тип файла шрифта может быть другим, но он будет указан в css). Мне удалось открыть файл .woff, и преобразование прошло отлично; были сохранены не только все контуры, но и имена глифов, функции открытого типа, кернинг и все остальное.

Конечно, как и при любом методе копирования веб-шрифтов, количество выводимых глифов, скорее всего, будет ограничено теми, которые используются на рассматриваемой странице.

Если файлы woff вам не нужны, существует множество онлайн-инструментов для преобразования woff в формат по вашему выбору. Или, если вам нужен автономный инструмент, ознакомьтесь с этим вопросом, который я задал, и ответами, которые я получил:

Изменить скрипт Python для пакетного преобразования всех файлов WOFF в Каталог

person Moscarda    schedule 10.04.2016

arrow_upward
0
arrow_downward

  1. Копировать:

    data:application/x-font-woff;charset=utf-8;base64,d09GRgABAA ...ETC

  2. Вставьте в адресную строку браузера, нажмите Enter.

    - A save as window appear -

  3. Выберите папку для сохранения (например, mywebsite/fonts), имя файла: myfont.woff

    - you now have myfont.woff in a folder -

  4. Включить в css:

    @font-face {
   font-family: 'myfont';
   src: url('fonts/myfont.woff');
   font-weight: normal;
   font-style: normal;
}

  5. Добавить в класс:

    .headline {
font-family: 'myfont', Helvetica, Arial, sans-serif;
}

Готово. ????

(Обратите внимание, что вы должны использовать тот же формат файла, который объявлен в синтаксисе data:URI. В вашем случае ...application/x-font-woff... следовательно, myfont.woff)

person supapow    schedule 25.11.2020