我可以把嵌入的Base64编码字体转换为字体文件吗？

Question

我有一个@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

我能将此转换为字体文件吗？

谢谢！

- mauriblint

Answer 1

复制base64编码的部分并将其转换。有很多方法可以做到这一点。

Linux

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 decoding）”和“导出到二进制文件”。

- mcrumley

---

谢谢。我尝试了Windows方法 - 很棒的工具（也许需要一个平面设计师的帮助 :)）。在将我的文件命名为myfont.woff后，我去了font-squirrel并转换了我需要的所有字体（.eot，.ttf等等）。 - Leopold Kristjansson

我在使用OS X系统，这里的openssl方法对我无效，但是Linux解决方案使用base64（使用选项-D而不是-d）有效。 - keithjgrant

Answer 2

@mcrumley的答案是正确的，但对于那些无法理解和/或害怕命令行的人，我有一种替代方法。 我刚刚谷歌了你的问题，并找到了http://base64converter.com/，它可以将任何base64文件转换/解码（和编码）回其原始格式。 我曾经用它来编码和解码base64图像，但这是我第一次尝试字体。 作为测试，我插入了在随机网页的css文件中找到的嵌入式base64字体信息。 您不想要整个条目，请省略css信息，否则转换将失败。

1. (For example) delete this info preceding the base64:

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

2. Delete this from the end:

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

3. 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.

当然，像任何用于提取网络字体的方法一样，输出的字符数量可能会受限于页面上使用的字符。

如果不需要woff文件，有很多在线工具可以将woff转换为所需的格式。或者，如果你需要离线工具，请查看我提出的这个问题和收到的答案： 修改Python脚本以批量转换目录中的所有“WOFF”文件

- Moscarda

Answer 3

1. Copy:

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

2. Paste in your browsers address bar, press enter.

   - A save as window appear -
   

3. Choose a folder to save to (ex: mywebsite/fonts), filename: myfont.woff

   - you now have myfont.woff in a folder -
   

4. Include in css:

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

5. Add to a class:

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

完成了。

（请注意，您必须使用与data:URI语法中声明的文件格式相同的文件格式。在您的情况下是application/x-font-woff，因此文件名为myfont.woff）

- supapow