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

Base64 encoded OpenType font-face using data URI(使用数据 URI 的 Base64 编码 OpenType 字体)

本文介绍了使用数据 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-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 字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:使用数据 URI 的 Base64 编码 OpenType 字体

基础教程推荐