如何使用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擴展名，則將文件拖放到瀏覽器中。）