CSS 如何解码base64编码的字体信息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6920832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to decode base64-encoded font information?
提问by Bernard Rosset
I encountered a website which used encoded font information. I tried to convert this encoded font to a binary file through the Base64 Endoder/DecoderWeb service, but I couldn't find out what is the format of the resulting file.
我遇到了一个使用编码字体信息的网站。我试图通过Base64 Endoder/DecoderWeb 服务将此编码字体转换为二进制文件，但我无法找出生成的文件的格式。
Hereis the encoded CSS content (the content is too big to be copied/paste here).
这是编码的 CSS 内容（内容太大，无法在此处复制/粘贴）。
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.
我问的问题是关于 base64 代码是如何伪造的，以及我缺少什么才能逆转这个过程，这意味着我不了解其中的所有内容。这些技术通常用于具有自定义字体的网页，并且与直接在 CSS 文件中给出引用的原始字体文件相比似乎有一些改进。我清楚所涉及的字体是商业字体，不能随意使用。
That debate is off-topic, stop trolling.
那个辩论是题外话，停止拖钓。
回答by skibulk
1) locate the complete font declaration, for example, data:font/opentype;base64,AaBbCcDdEeFf0123456789==
1) 找到完整的字体声明，例如， data:font/opentype;base64,AaBbCcDdEeFf0123456789==
2) copy the encoded data portion; exclude the leading type declaration and comma.
2) 复制编码后的数据部分；排除前导类型声明和逗号。
Drop this data:font/opentype;base64,
放下这个 data:font/opentype;base64,
You want this: AaBbCcDdEeFf0123456789==
你要这个： AaBbCcDdEeFf0123456789==
3) decode the data and save as a binary encoded file. Do notdecode the data and manually paste the result into a text editor. Use http://www.motobit.com/util/base64-decoder-encoder.aspSelect the "decode the data from a Base64 string" and "export to a binary file" options.
3）解码数据并保存为二进制编码文件。不要解码数据并将结果手动粘贴到文本编辑器中。使用http://www.motobit.com/util/base64-decoder-encoder.asp选择“从 Base64 字符串解码数据”和“导出到二进制文件”选项。
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.
4) 使用纯文本编辑器查看文件。文件的前 3 或 4 个字母可能是“woff”、“otf”或“ttf”。这是您的实际文件类型。
回答by Plant Sam
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 (e.g. data:application/font-woffis a .woff, data:application/font-woff2is a .woff2, etc...). This will work with any font file.
粘贴data:application/font-woff;base64,d09GRgABAA.....到浏览器（最好是 Chrome）地址栏中。它将下载文件，使用适当的文件扩展名重命名文件（例如，data:application/font-woff是 a .woff、data:application/font-woff2是 a.woff2等...）。这适用于任何字体文件。
回答by starfry
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:
查看OP的文件，里面有六种字体。每一个基本上都是一个 CSS 规则；这是示例文件中的第一个：
@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).
这会告诉您识别字体所需的一切信息。您可以看到它的名称 ( p22-underground-1)、样式 ( normal)、重量 ( 400) 和类型 ( 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 Motobitor by writing a program.
至于将base64中的字体解码成二进制文件，需要取base64位（如上图所示d09GRk9...yn4b8C3JEZAA==，注意这里为了节省空间，去掉了cenre中的bulk），用Motobit等base64解码器解码，或者通过编写程序。
If you're on Linux, you can use base64 -d <file>to achieve the same thing.
如果您使用的是 Linux，则可以使用它base64 -d <file>来实现相同的目的。
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 sitewhere this is the case.
如果解码失败，base64 字符串也可能被percent-escaped。OP 的示例并非如此，但我知道至少有一个站点是这种情况。
You can check for this by looking for percent %symbols in the base64 string. If percent characters are the only non-validbase64 characters then you can try to unescape the string prior to decoding.
您可以通过%在 base64 字符串中查找百分比符号来检查这一点。如果百分比字符是唯一无效的base64 字符，那么您可以尝试在解码之前对字符串进行转义。
There is a web sitewhere 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):
有一个网站可以让你做到这一点，或者，对于那些在 Linux 上的人，下面显示了一种命令行方法（有很多方法可以做到这一点；这个使用 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.
我在 Ruby 中编写了一个小工具，它使用上述技术获取 url 并将任何嵌入的字体转储到文件中，因此我可以说它们确实有效。
回答by Andrew Moore
The CSS clearly states the mimetype to be font/opentype... The font is in OpenType (.otf) format.
CSS 清楚地指出 mimetype 为font/opentype... 字体采用 OpenType ( .otf) 格式。
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.
CSS 文件（Proxma Nova[Mark Simonson Studios] 和P22 Underground[P22 Type Foundry]）中引用的字体不是免费的。您需要购买许可证才能合法使用它们。
