Base64使用数据URI编码OpenType font-face

Question

我想在font-face中添加base64 encoded OpenType字体作为数据URI。

到目前为止，我有这个：

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

但我相信它并没有正确地包含我的风格。

对此的任何帮助都将非常感激。

Answer 1

数据URI始终采用以下格式：

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

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

font/opentype

所以，你可以像这样使用它：

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

更换

[base64 string here]

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

备注

请注意：

• 您应该font/opentype使用data，而不是otf。
• 你应该复制粘贴精确的base-64编码字符串，不需要添加空格等任何更改（我相信其中有一些空格）

在线编码工具

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