我想在 font-face 中添加一个 base64 编码
OpenType 字体作为数据 URI。
到目前为止我有这个:
@font-face {
font-family: 'test';
src: url(data:font/otf;base64,
// Base64 string here ...
) format('opentype');
}
但我认为它没有按照我的风格正确包含字体。
如能提供任何帮助,我们将不胜感激。
最佳答案
虽然没有被问到,但我确信有人会来这里寻找 woff2 解决方案并且会遇到与我相同的问题。使用此站点上传文件:https://base64.guru/converter/encode/file确保使用选项“Data URI”。将 url() 值替换为网站中的代码。
对于 CSS,我必须使用以下代码:
@font-face {
font-family: 'MYFONT'; /*This is what your font will be named*/
src: local('MYFONT'), /* It will check the machine for a font matching this name, if it exists it will use this. Not needed when your are writing the woff2 file since you already sending all the data. */
url('data:@file/octet-stream;base64,d09GMgABAAAAAK6kABIAAAABgQgAAK47AAA=') /*This is the base64 code copy pasted from the site*/
format('woff2'); /*This ensures the browser treats it as a WOFF2 file. Notice there is no comma after the url() */
}
要使您的自定义字体正常工作,您需要指定它:
<div style="font-family: MYFONT">
My new font
</div>
我发布的实际 base64 代码不起作用。我使用的 woff2 文件是 50kb,不需要一页又一页的 base64 代码。
关于html - 使用数据 URI 的 Base64 编码 OpenType 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35120217/