更改 flexdashboard 中单个文本部分的字体大小

Posted 2023-03-24

【中文标题】更改 flexdashboard 中单个文本部分的字体大小

【英文标题】：Change font size for individual text section in flexdashboard

【发布时间】：2017-02-07 10:32:01

【问题描述】：

我正在使用 flexdashboard 创建报告，我只想更改页面一部分的字体大小。

我感觉可以通过添加 CSS 类来做到这一点，但是我找不到如何在 R Markdown 代码中指定类名。

有什么想法吗？

【参考方案1】：

您可以将 CSS 直接添加到您的 Rmarkdown 文档中。例如，如果您想更改具有“chart-title”类的对象的字体，您可以将以下内容插入到您的 R markdown 文件中：

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
theme: readable
orientation: columns
vertical_layout: fill
---

<style type="text/css">

.chart-title   /* chart_title  */
   font-size: 30px;
   font-family: Algerian;

</style>

【讨论】：

这仅在文档具有“图表标题”类时才有效。如果我想为其中一个文本输出分配类怎么办？

上面的例子将所有元素的样式设置为 "chart-title" 作为类属性，你可以在浏览器中检查你自己的仪表板来了解你想要的元素的名称、ID 或类喜欢风格。

但这将适用于该类的所有元素。我只想更改其中一个。

您可以在 Markdown 文档中使用 html 来添加具有特定类的文本，您可以按照我在回答中显示的那样设置样式。例如：

【参考方案2】：

您可以对单个项目执行以下操作：

Column data-width=400
-----------------------------------------------------------------------

### <b><font face="Georgia" size="2em" color="#000000">Chart B</font></b>   

【参考方案3】：

Flexdashboard 会自动为该部分添加一个与该部分标题同名的 id。例如，如果您有一个“我的情节”部分，则该部分的 id 将是“我的情节”。您可以按以下方式添加特定于部分的 css

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
theme: readable
orientation: columns
vertical_layout: fill
---

Row
-----------------------------------------------------------------------
### my plot
plot1

### my plot2
plot2

<style type="text/css">
#my-plot .chart-title
  font-size: 20px;

<style type="text/css">

在上面的例子中，只有 plot 1 的字体大小会改变。