将base64字体转换回ttf或otf格式

21

我按照下面的指示操作了,但是我还没有成功地转换为.woff格式。

我能将内嵌的base64编码字体转换为字体文件吗?

我的字体文件以此开头:

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

并以...结尾

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

我只能假设问题出在我试图转换的代码部分。任何帮助都将不胜感激。

当我尝试下面的命令时,它只会创建一个空文件。

openssl base64 -d -in base64_encoded_font.txt -out font.woff
5个回答

35

您可以使用两个在线工具来实现这一点。

首先,复制Base64数据,即'base64,'后面的所有内容,不包括结尾的');'。然后,进入以下网站并粘贴代码:

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

它会下载一个.bin文件。接下来,请访问:

https://onlinefontconverter.com

在右侧上传您的.bin文件,并从左侧的链接中选择转换为otf或tiff。 点击新的下载链接。下载、解压缩,您的字体就在里面了!


非常感谢您的回答。不幸的是,这个问题的第二部分目前似乎无法工作。有没有其他的替代方案? - JGC
1
opinionatedgeek网站出现了一些错误,但刷新网页后问题得到解决,第二部分对我来说运行良好。 - Niel
3
尝试下载解码字体时出现网络错误。 - Adrian
1
正如@Adrian所提到的,我也遇到了网络错误,但我尝试了另一个完美运行的工具,你只需粘贴数据(在base64,之后的所有内容),并排除字符串) format('truetype');这是我使用的工具,https://base64.guru/converter/decode,它会自动检测到它是字体文件,并为您提供下载选项。 - Yassir Khaldi
不幸的是,onlinefontconverter.com 已经宕机了几天了。有人知道其他替代网站吗? - Geza Gog

30

您可以在开发者工具的“网络”面板中打开字体,然后保存它。

以下是谷歌Chrome的步骤:

  1. 打开Chrome开发工具(CMD+SHIFT+I, CTRL+SHIFT+I)
  2. 打开“网络”选项卡并刷新网站
  3. 仅过滤:字体
  4. 右键单击字体文件 + “在新标签页中打开”
  5. 保存文件并根据字体类型进行命名。

就这些。


这是最简单的一个!谢谢! - Navaneeth

5
我刚刚通过谷歌搜索找到了一个网站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.

当然,就像任何用于提取网络字体的方法一样,输出的字形数量可能只限于在所访问的页面中使用的字形。

5
  • 打开浏览器的检查工具,选择网络(Network)选项卡。
  • 刷新页面并筛选文件类型为woff、ttf等。
  • 右键点击文件名,选择复制响应(Copy Response)。
  • 将内容粘贴到一个文件中,并从顶部删除所有内容直到包括"base64,"在内的位置。
  • 将剩余数据粘贴到https://www.opinionatedgeek.com/dotnet/tools/Base64Decode/, 并解码。
  • 下载bin文件并上传至https://onlinefontconverter.com

现在您已经成功获取了受限字体内容!感谢Kupe和Endless的帮助。


2

使用以下步骤将 base64 字体转换为其他格式:

  1. 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);
    }
    
  2. Decode the base64 data using a converter. Here are two online converters: opinionatedgeek.com and motobit.com

    These will both output a .bin file.

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接