代码之家 › 专栏 › 技术社区 › Eric Krantz

使用custom.css渲染为HTML时更改Quarto“term”的字体

quarto r-markdown r css html

Eric Krantz · 技术社区 · 1 年前

我正在构建一个模板 .css Quarto将使用我的品牌来渲染HTML文档。 This page 显示如何插入 term (向下滚动到底部 Lists ). 在渲染的HTML中 学期 以默认字体显示,但我希望以常规段落字体显示。

这是我的 .css 。内联方程有字体例外(我的文档中有一些方程我不想在Aktiv-Grotesk中使用)。

p, span:not(.math.inline) {
    font-size: 11pt;
    font-family: 'Aktiv Grotesk';
    color:black
}

span:not(.math.inline) {
    font-family: 'Aktiv Grotesk', Times, serif ;
}

这是我的Quarto医生:

---
title: Term Font
format: 
  html:
    css: styles_def.css
---

## Definitions

Definitions can be inserted in the document by using a colon, space, then the definition. Each definition needs to be separated by a line feed.

Noun
: A person, place, or thing.

Verb
: An action word.

输出如下:

我如何完善我的 .css 文件使用相同的字体 terms ?

1 回复 | 直到 1 年前

Jan 1 年前

术语被呈现到定义列表中(或 description lists), <dl> ,参见例如8.7.4.1 Pandoc Guide 因此,在您的示例中 HTML 看起来像这样:

<dl>
   <dt>Noun</dt>
   <dd>
      A person, place, or thing.
   </dd>
   <dt>Verb</dt>
   <dd>
      An action word.
   </dd>
</dl>

因此,您可以添加 dl , dt 或 dd 到你的 css ,这取决于你需要什么。例如,如果你想为整个列表应用样式,你可以使用:

styles_def.css

p, span:not(.math.inline), dl {
    font-size: 11pt;
    font-family: 'Aktiv Grotesk';
    color:black
}

span:not(.math.inline), dl {
    font-family: 'Aktiv Grotesk', Times, serif ;
}

文档.qmd

---
title: Term Font
format: 
  html:
    css: styles_def.css
---

## Definitions

Definitions can be inserted in the document by using a colon, space, then the definition. Each definition needs to be separated by a line feed.

Noun
: A person, place, or thing.

Verb
: An action word.