reveal.js 演示文稿的缩小字体大小和右对齐字体

Question

你好：我正在用 markdown 编写一些讲座并将它们转换为 reveal.js 幻灯片。老实说，它工作得很好，除了有一些我想修改的基本功能，但我不知道如何解决 CSS。

我怎样才能：

左对齐幻灯片上的大部分文本。
缩小大部分幻灯片正文的字体大小。一般来说，我想这样做，但我特别需要为参考页面这样做。

谢谢！！

Answer 1

第一步是转到 <head></head> 部分。在底部为您的自定义 CSS 样式制作一个新的 <style></style> 标签。

在 reveal.js

中对齐幻灯片上的一段文字

创建一个名为 left 的新 class。 .left { } 在你的 class 里面，放上 text-align: left;。您的代码应如下所示：

<style>
  .left {
    text-align: left;
  }
</style>

在您的 HTML 中，将 left class 添加到您的任何元素中。例如

<section class="left">Slide 1</section>

或：

<section>
  I'm just normal text.
  <p class="left">But I'm not!</p>
</section>

更改 reveal.js

中元素的字体大小

首先要做的是创建一个新的 class，就像我们为对齐文本所做的那样。

<head>
  <!-- Custom Styles For Our Presentation -->
  <style>
    .left {
      text-align: left;
    }
    
    .size {
      
    }
  </style>
</head>

然后添加以下内容： font-size: /*custom font size*/; 您可以在那里更改大小。 CSS 也有一些内置样式，例如 large、medium 和 small。之后，只需将 class 添加到您选择的元素。您还可以像这样将 classes 添加到一个元素：<section class="left size">Slide 1</section>。您的完成代码可能是这样的：

<head>
  <!-- Custom Styles For Our Presentation -->
  <style>
    .left {
      text-align: left;
    }
    
    .size {
      font-size: 80px;
    }
  </style>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section class="left size">Slide 1</section>
      <section>Slide 2 <p class="left">Text aligned left</p></section>
    </div>
  </div>
</body>

reveal.js 演示文稿的缩小字体大小和右对齐字体

Shrink font size and right-align fonts for reveal.js presentations

markdown

pandoc

reveal.js

在 reveal.js

更改 reveal.js