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

查看:37
本文介绍了使用数据 URI 的 Base64 编码的 OpenType 字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在 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-typecode>,在 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 编码字符串,不要进行任何更改,例如添加空格等(我相信其中有一些空格)
  • you should use font/opentype for the data, not otf.
  • you should copy-paste the exact base-64 encode string, without any changes like added spaces, etc (I believe there are some spaces in it)

在线编码工具

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

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆