为reveal.js 演示缩小字体大小和右对齐字体答案

【问题标题】：Shrink font size and right-align fonts for reveal.js presentations为reveal.js 演示缩小字体大小和右对齐字体
【发布时间】：2021-01-05 19:53:46
【问题描述】：

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

我该怎么做：

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

谢谢！！

【问题讨论】：

Reveal.js has several themes。你用的是哪个？
简单的主题！

标签： markdown pandoc reveal.js

【解决方案1】：

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

在reveal.js中对齐幻灯片上的一段文本

创建一个名为 left 的新类。 .left { } 在您的班级中，输入text-align: left;。您的代码应如下所示：

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

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

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

或者：

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

在reveal.js中改变元素的字体大小

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

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

然后添加以下内容： font-size: /*custom font size*/; 你可以在那里改变尺寸。 CSS 也有一些内置的样式，例如large、medium 和small。之后，只需将类添加到您选择的元素中。您还可以将类添加到一个元素，如下所示：<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>

【讨论】：