有可能像css一样将字体文件嵌入到html中吗？

Question

在我工作的项目中,我需要生成一个单页HTML文件,其中包含其中的所有内容(JavaScript代码,CSS,图像等).所以,应该没有外部参考.

我也打算使用Bootstrap,但我不确定是否可以像CSS一样在HTML中嵌入字体文件.

任何的想法？

Answer 1

是的你可以。您必须将字体转换为 BASE64 字节并嵌入数据 URI，如下所示：

@font-face {
    font-family: 'yourfontname';
    src: url(data:application/x-font-woff;charset=utf-8;base64,**your base64 here**) format('woff');
    font-weight: normal;
    font-style: normal;
}

您可以使用此网站将您的字体转换为 Base64： Base64 编码器

Answer 2

是的,这实际上是可能的.您可以将字体嵌入为base64编码字体,如下所示:

@font-face{
    font-family: FontName;
    src: url(data:font/ttf;base64,THESTRING… ) format('truetype');
}

但这不可取,因为base64字符串会变得相当大并导致性能问题.