How to decode base64-encoded font information?

问题:

I encountered a website which used encoded font information. I tried to convert this encoded font to a binary file through the Base64 Endoder/Decoder Web service, but I couldn't find out what is the format of the resulting file.

Here is the encoded CSS content (the content is too big to be copied/paste here).

Thanks!

[EDIT]

Please don't speculate on what I want to do.

I am asking questions about how the base64 code has been forged and what I am missing to be able to reverse the process, which means I do not understand everything in it. These technique is often used in webpages with custom fonts, and seems to have some improvements compared to the raw font file directly given reference in the CSS file. I am fully aware that the involved fonts are commercial ones and can't be used freely.

That debate is off-topic, stop trolling.

回答1:

1) locate the complete font declaration, for example, data:font/opentype;base64,AaBbCcDdEeFf0123456789==

2) copy the encoded data portion; exclude the leading type declaration and comma.

Drop this data:font/opentype;base64,

You want this: AaBbCcDdEeFf0123456789==

3) decode the data and save as a binary encoded file. Do not decode the data and manually paste the result into a text editor. Use http://www.motobit.com/util/base64-decoder-encoder.asp Select the "decode the data from a Base64 string" and "export to a binary file" options.

4) View the file using a plain text editor. The first 3 or 4 letters of the file are probably "woff", "otf", or "ttf". This is your actual file type.

回答2:

Paste data:application/font-woff;base64,d09GRgABAA..... in the browser (ideally Chrome) address bar. It will download the file, rename the file with proper file extension. This will work with any font file.

回答3:

This is an interesting question, despite being a magnet for pirate hunters. I will focus on the technical question and try to give some insight.

Looking at the OP's file, there are six fonts in it. Each one is basically a CSS rule; here's the first one in the example file:

@font-face {
    font-family: "p22-underground-1";
    font-style: normal;
    font-weight: 400;
    src: url("data:font/opentype;base64,d09GRk9...yn4b8C3JEZAA==");
}

This tells you everything that you need to know to identify the font. You can see its name (p22-underground-1) its style (normal), weight (400) and type (opentype).

As for decoding the font from base64 into a binary file, you need to take the base64 bit (shown above as d09GRk9...yn4b8C3JEZAA==, note the bulk in the cenre has been removed to save space here) and decode it with a base64 decoder such as Motobit or by writing a program.

If you're on Linux, you can use base64 -d <file> to achieve the same thing.

If the decoding fails, the base64 string may be also be percent-escaped. This isn't the case with the OP's example but I know of at least one site where this is the case.

You can check for this by looking for percent % symbols in the base64 string. If percent characters are the only non-valid base64 characters then you can try to unescape the string prior to decoding.

There is a web site where you can do this or, again, for those on Linux, a command-line method is shown below (there are many ways to do this; this one uses Perl):

perl -MURI::Escape -lne 'print uri_unescape($_)' < file.b64_escaped > file.b64

I wrote a small tool in Ruby that takes a url and dumps any embedded fonts into files using the above techniques so I can say that they do work.

回答4:

The CSS clearly states the mimetype to be font/opentype... The font is in OpenType (.otf) format.

However, even if you do decode the font, please check the license. You might not be allowed to use that font in your own projects.

The fonts referenced in the CSS files (Proxma Nova [Mark Simonson Studios] and P22 Underground [P22 Type Foundry]) are not free. You need to purchase a license to use them legally.

回答5:

You can see that the mimetype is font/opentype, which means the resulting binary should be .otf.

Why, though, would you ever want to decode the font? Sounds like you are planning to use that font without permission.