如何在reveal.js中添加和更改字体？

Question

我正在使用reveal.js制作下一个演示文稿，我想要更改用于标题的默认字体。

如何在reveal.js中添加和更改字体？

- Luzan Baral

Answer 1

你可以通过修改当前主题的CSS文件来完成它。

主题文件位于文件夹/css/theme/[yourtheme].css中。

一旦你打开了你所使用主题的CSS文件，你就可以看到像下面这样的标题部分。

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #eee8d5;
  font-family: "League Gothic", Impact, sans-serif;
  line-height: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: none; }

现在，您可以修改标题的任何属性。

- Aatish Sai

Answer 2

实际上有很多字体可用，只需要在不同的主题中寻找适合演示的字体。我曾经遇到过与默认主题相似的问题，我将其更改为其他主题，并在 css/theme 中查找主题。

要更改主题，请在 index.html 文件中更改链接标签。

<link rel="stylesheet" href="css/theme/default.css" id="theme">

将default.css更改为其他主题文件。

<link rel="stylesheet" href="css/theme/solarized.css" id="theme">

希望它能够正常工作。

如果您仍想更改字体，您可以通过进入主题的css文件并为每个标签更改字体系列来实现。

- user4235686

---

非常准确，请检查太阳化主题。 - Signcodeindie

Answer 3

补充aatish-sai的答案（谢谢！）。

这里有一个基础主题模板：https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss。

如果我想在从jupyter笔记本foo.ipynb生成的reveal.js幻灯片中更改显示字体（比如，改为Fira Sans），只需编写以下文本。

.reveal,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: "Fira Sans";
}

在与笔记本相同的目录中，到文件foo.css。

- coltongrainger