如何使用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中的字体。 （TLDR：使用Webfont Generator ）

---

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