html - 如何使用 html-inline 将在我的 css 中添加的自定义字体添加到我的 reveal.js 演示文稿中？

Question

我下载了 reveal.js 演示 ( https://github.com/hakimel/reveal.js ) 并添加了这个 custom.css 文件:

@font-face {
    font-family: 'myCustomFont';
    src: url(../lib/font/myCustomFont.ttf) format('truetype');
}

.my-class h1 {
    font-size: 5em;
    font-family: "myCustomFont";
}

然后在 index.html 中，我将其添加到演示文稿中:

<link rel="stylesheet" href="css/custom.css">

我还在 index.html 中添加样式类:

<div class="slides">
    <section class="my-class"><h1>Slide 1</h1></section>
    <section>Slide 2</section>
</div>

现在，当我尝试使用 html-inline ( https://www.npmjs.com/package/html-inline) 将整个内容内联时

html-inline -i index.html -o indexInline.html

发生的情况是只有来自 css 的字体大小在 indexInline.html 中，而不是自定义字体。我怎样才能将字体也放入内联 html 中？

我正在寻找一种方法将我的 reveal.js 演示文稿放入一个 html 文件中，所以如果这不适用于 html-inline，是否还有其他方法可以实现？

Answer 1

您需要最终的 HTML 文件包含 CSS，其中 src 是数据 url:

@font-face {
 font-family: 'myCustomFont';
 src: url(data:font/ttf;base64,AAEAAAATAQAABAAwR1BPU+Df...);
}

我猜你试过的内联工具不支持字体。也许还有其他工具可以做到？

在将字体传递给内联工具之前，您可以在 CSS 中手动内联字体 these instructions . (TLDR:使用 Webfont Generator )

---

低技术含量的解决方案可能只是使用 Internet Explorer 的另存为“Web 存档，单个文件 (*.mht)”功能。虽然Chrome等其他浏览器不支持保存成这种格式，但我想大多数浏览器都支持查看。 (如果未关联 MHT 扩展名，则将文件拖放到浏览器中。)