使用数据 URI 的 Base64 编码 OpenType 字体

2022-01-21 00:00:00 base64 html css font-face

我想在 font-face 中添加一个 base64 编码 OpenType 字体作为数据 URI.

I want to add a base64 encoded OpenType font as a data URI in font-face.

到目前为止我有这个:

@font-face {
    font-family: 'test';
    src: url(data:font/otf;base64,
        // Base64 string here ...
    ) format('opentype');
}

但我认为它没有将字体正确地包含在我的风格中.

But I believe it does not include the font correctly to my style.

对此的任何帮助将不胜感激.

Any help with this would be really appreciated.

推荐答案

数据 URI 总是采用这种格式:

Data URIs are always of this format:

data:[<mediatype>][;base64],<data>

每个 数据 URI 的第一部分是 media-type，在 Open Type 字体的情况下是:

The very first part of every data URI is the media-type, which in the case of an Open Type font is:

font/opentype

所以，你可以这样使用它:

So, you may use it like this:

@font-face{
    font-family: test;
    src: url(data:font/opentype; base64, [base64 string here]);
}

更换

[base64 string here]

使用您的 base-64 编码字符串的精确复制粘贴版本.

with the exact copy-pasted version of your base-64 encoded string.

备注

请注意:

  • 您应该为 data 使用 font/opentype，而不是 otf.
  • 您应该复制粘贴确切的 base-64 编码字符串，不要进行任何更改，例如添加空格等(我相信其中有一些空格)

在线编码工具

您可以使用 this 工具，将您的字体文件转换为编码字符串.

You may use this tool, to convert your font file to the encoded string.

相关文章