是否可以像 css 一样将字体文件嵌入到 html 中？

Question

在我从事的项目中，我需要生成一页 HTML 文件，其中包含其中的所有内容（JavaScript 代码、CSS、图像等）。因此，不应有外部参考。

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

有什么想法吗？

Answer 1

是的，这实际上是可能的。您可以像这样将字体嵌入为 base64 编码字体：

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

但不建议这样做，因为 base64 字符串会变得相当大并导致性能问题。

Answer 2

是的，你可以。您必须将字体转换为 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 encoder

是否可以像 css 一样将字体文件嵌入到 html 中？

Is it possible to embed font files into html just like css?

html

css

fonts

font-face

twitter-bootstrap