使用数据 URI 的 Base64 编码 OpenType 字体 [英] Base64 encoded OpenType font-face using data URI

问题描述

我想在 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.

这篇关于使用数据 URI 的 Base64 编码 OpenType 字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！