如何使用 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:

中添加了样式 class

<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: Use Webfont Generator)

low-tech 解决方案可能只是使用 Internet Explorer 的 save-as "Web Archive, single file (*.mht)" 功能。虽然其他浏览器如Chrome不支持保存为这种格式，但我想大多数浏览器都支持查看。（Drag-and-drop 如果未关联 MHT 扩展名，则文件进入浏览器。）

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

How can I add the custom fonts added in my css to my reveal.js presentation with html-inline?

html

css

reveal.js