25

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

我可以将其转换为字体文件吗？

谢谢！

4

3 回答 3

45

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

Linux

base64 -d base64_encoded_font.txt > font.woff

Mac OS X

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

视窗

转到http://www.motobit.com/util/base64-decoder-encoder.asp并粘贴文本。选择“从 Base64 字符串解码数据（base64 解码）”和“导出到二进制文件”。

于 2012-09-21T14:39:41.953 回答
4

@mcrumley 的回答是正确的，但是对于那些无法弄清楚和/或害怕命令行的人来说，我有另一种方法。

我刚刚搜索了您的问题，发现http://base64converter.com/可以将任何 base64 文件转换/解码（和编码）回其原始格式。过去我用它来编码和解码 base64 图像，但这是我第一次尝试使用字体。作为测试，我插入了在随机网页的 css 文件中找到的嵌入式 base64 字体信息。您不想要整个条目，请留下 css 信息，否则转换将失败。

  1. （例如）删除base64之前的这个信息：

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

  2. 从最后删除：

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

  3. 您将留下 base64 编码数据，将其粘贴到“输入”字段中，为输出选择“解码”并按下按钮。它将创建一个名为download.bin: 点击它下载它的文件。然后将文件扩展名从更改bin为woff（您的字体文件类型可能不同，但它会在 css 中说明）。我能够打开 .woff 文件并且转换工作完美；不仅所有的轮廓都被保存了，字形名称、opentype 特征、字距调整和所有内容也都保存了。

当然，就像任何用于翻录 webfonts 的方法一样，输出的字形数量可能仅限于相关页面上使用的字形。

如果woff文件不是您需要的，有很多在线工具可以转换woff为您选择的格式。或者，如果您需要离线工具，请查看我提出的这个问题以及我收到的答案：

修改 Python 脚本以批量转换目录中的所有“WOFF”文件

于 2016-04-10T18:50:15.137 回答
1

  1. 复制：

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

  2. 粘贴到浏览器地址栏中，按回车键。

    - A save as window appear -

  3. 选择要保存到的文件夹（例如：mywebsite/fonts），文件名：myfont.woff

    - you now have myfont.woff in a folder -

  4. 包含在 css 中：

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

  5. 添加到类：

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

完毕。

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

于 2020-11-25T22:05:25.190 回答