使用数据 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-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 thedata
, nototf
. - 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屋!