reveal.js的演讲者注解插件不使用.qmd的YAML头中css:键的自定义CSS（speaker-notes等CSS类位于单独的CSS文件 [...]/libs/revealjs/dist/reveal.css 中）。
你可以使用:::块来生成div并应用内联CSS。

## A Slide with speaker notes

Slide content

::: {.notes}

Here are your notes

::: {style="font-size:14px"}

... and here are some small-font notes.

- This doesn't break markdown.

:::

We're larger, again

:::

结果

更新：

我实际上有一个夸托扩展过滤器style-speaker-note，允许写css风格的css文件，并适用于演讲者笔记字体或其他组件。阅读repo自述文件，以了解“安装”，“如何使用”和更多的例子。
你可以在{.notes} div中包含一个CSS块，然后在这个CSS块中定义一个CSS类，并为这个类指定你想要的所有CSS属性，然后使用这个类来修改你想要修改的元素。（当然，你可以定义多个CSS类，但是所有的类都必须在.notes div中。

---
title: "Changing styles of Speaker notes."
format: revealjs
engine: knitr
---

## A Slide with speaker notes

Slide content

:::: {.notes}

```{css, echo=FALSE}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

.change-note {
  font-size: 14px;
  font-family: 'IBM Plex Mono', monospace;
  background-color: #D4FFE9;
}

Here are the notes.

::: {.change-note}

These fonts are in smaller size and with different font family.

:::

and these are larger in size.

::::

![](https://i.stack.imgur.com/rpIcG.png)

现在有两件重要的事情需要注意，

* 由于夸托为每个不同幻灯片的演讲者备注生成单独的HTML主体，因此定义的CSS类只能用于定义它的特定幻灯片备注。
* 而且（虽然它与问题无关，只是为了避免任何混淆）我使用`engine: knitr`进行上述reprex，否则它将使用jupyter内核呈现（自从quarto找到第一个代码块CSS块以来）。