Converting base64 font back to ttf or otf

问题

I've followed the instructions below but I've not been able to successfully convert to .woff

Can I convert embedded base64 encode font to a font file?

my font file starts with

@font-face {
font-family: "ff_0f65bfd4c8d788fc278265526a59";
src: url(data:font/woff;base64,d09GRk9UVE8AAGQDAAs............

and ends with

...........PPvfkLBXJFlQ==);
}

I can only assume the issue is the portion of the code I'm trying to convert. Any help would be much appreciated.

When I attempt the command below, it just creates an empty file.

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

回答1:

Yes you can by using two online tools.

First copy the base64 data, so everything after 'base64,' and leave out the ); ending. Then go this website and paste the code:

http://www.opinionatedgeek.com/dotnet/tools/Base64Decode/

It will download a .bin file. Next go to:

https://onlinefontconverter.com

Upload your .bin file on the right and select convert to otf or tiff from the links on the left. Click the new download link. Download, unzip and your font will be in there!

回答2:

You can simply open the font from Network panel in developers tools and save it.

Here is step-by-step for Google Chrome:

Open Chrome dev. tools (CMD+SHIFT+I, CTRL+SHIFT+I)
Open "Network" tab, refresh website
Filter only: Fonts
Right click on font file + "Open in new tab"
Save file + name it based on font type.

That's all.

回答3:

I just Googled your question, and found http://base64converter.com/ which can convert/decode (and encode) any base64 file back to its original format. I'd used it to encode and decode base64 images in this past, but this was my first attempt with a font. As a test I plugged in the embedded base64 font info I found in a random webpage's css file. You don't want the entire entry, leave off the css info or the conversion will fail.

(For example) delete this info preceding the base64:

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

Delete this from the end:
```
);font-weight:400;font-style:normal}
```
You'll be left with the base64 encoded data, paste that in the "Input" field, select "Decode" for the output and press the button. It will create a file called download.bin : click it to download it. Then change the file extension from bin to woff (your font file-type might be different, but it will say in the css). I was able to open the .woff file and the conversion worked perfectly; not only were all the outlines saved, but so were the glyph names, the opentype features, kerning, and everything.

Of course, like any method used to rip webfonts, the number of glyphs outputted will likely be limited to those used on the page in question.

回答4:

Go to Inspector in browser, and select Network.
Reload the page an filter files from woff, ttf, etc..
On file name click right and select copy response.
Paste content into a file and delete from top all content until to "base64," inclusive.
Paste the rest of the data in https://www.opinionatedgeek.com/dotnet/tools/Base64Decode/ and decode.
Download the bin file and upload to https://onlinefontconverter.com

Now you have your RESTRICTED font content! Success and thanks to Kupe and Endless.

回答5:

Convert base64 fonts to other formats using the following steps:

Copy the base64 data.

In CSS it's the part marked "THIS_CODE":

@font-face {
  font-family:"font-name-here";
  src:url(data:font/opentype;base64,THIS_CODE);
}

Decode the base64 data using a converter. Here are two online converters: opinionatedgeek.com and motobit.com

These will both output a .bin file.
Go to onlinefontconverter.com check the types of fonts that you want (maybe OTF or TTF) and then click "Select Font(s)" and upload the .bin file. Click "Done" and the site will find the desired font file formats, then offer you a link to download a zip file containing your desired font files.

来源：https://stackoverflow.com/questions/21298379/converting-base64-font-back-to-ttf-or-otf

标签

fonts

base64