在 R 仪表板中更改字体大小答案

【问题标题】：Changing Font Sizes in R Dashboards在 R 仪表板中更改字体大小
【发布时间】：2022-08-24 01:46:00
【问题描述】：

我发现这个仪表板示例是在 R 中使用 Flexdashboard 制作的：https://beta.rstudioconnect.com/jjallaire/htmlwidgets-showcase-storyboard/htmlwidgets-showcase-storyboard.html

此仪表板中有一些文本（即“项目符号”），例如“使用地图图块、标记、多边形、线条、弹出窗口和 GeoJSON 的任意组合来编写地图。”我有兴趣了解如何更改此类文本的字体/字体大小。

我在 Stackoverflow (Change font size for individual text section in flexdashboard) 上找到了这篇文章，其中展示了如何更改标题的字体：

---
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>

但我不确定此代码是否可用于更改每个单独页面上“项目符号文本”的字体/字体大小。

例如，如果您使用此仪表板的前两个选项卡：

---
title: \"HTML Widgets Showcase\"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    social: menu
    source: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
```

### Leaflet is a JavaScript library for creating dynamic maps that support panning and zooming along with various annotations.

```{r}
library(leaflet)
leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")
```

***

https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic


### d3heatmap creates interactive D3 heatmaps including support for row/column highlighting and zooming.

```{r}
library(d3heatmap)
d3heatmap(mtcars, scale=\"column\", colors=\"Blues\")
```

***

https://github.com/rstudio/d3heatmap/

- Highlight rows/columns by clicking axis labels

- Click and drag over colormap to zoom in (click on colormap to zoom out)

- Optional clustering and dendrograms, courtesy of base::heatmap

我试图添加这个字体/字体大小自定义，它似乎没有改变任何东西：

---
title: \"HTML Widgets Showcase\"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    social: menu
    source: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
```

### Leaflet is a JavaScript library for creating dynamic maps that support panning and zooming along with various annotations.

```{r}
library(leaflet)
leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup=\"The birthplace of R\")
```

***


<style type=\"text/css\">

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

</style>

https://rstudio.github.io/leaflet/

- Interactive panning/zooming

- Compose maps using arbitrary combinations of map tiles, markers, polygons, lines, popups, and GeoJSON.

- Create maps right from the R console or RStudio

- Embed maps in knitr/R Markdown documents and Shiny apps

- Easily render Spatial objects from the sp package, or data frames with latitude/longitude columns

- Use map bounds and mouse events to drive Shiny logic


### d3heatmap creates interactive D3 heatmaps including support for row/column highlighting and zooming.

```{r}
library(d3heatmap)
d3heatmap(mtcars, scale=\"column\", colors=\"Blues\")
```

***


<style type=\"text/css\">

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

</style>

https://github.com/rstudio/d3heatmap/

- Highlight rows/columns by clicking axis labels

- Click and drag over colormap to zoom in (click on colormap to zoom out)

- Optional clustering and dendrograms, courtesy of base::heatmap

有人可以告诉我如何做到这一点吗？

谢谢！

标签： html r fonts data-visualization

【解决方案1】：

BLUF 或更知名的 TL;DR

我会给你答案，然后如果你继续阅读，我会告诉你我是如何知道答案的。

顺便说一句，很多人仍然在样式标签中使用type，但它实际上已被弃用。它不会伤害任何东西，但它也不会做任何事情。

<style> 
li > p {  
  font-size: 1.2em;
} 
</style>

em 是一个相对大小。如果您不太了解字体大小或为什么这可能很重要，you can read about that here。

细节

要更改项目符号，您需要修改 HTML 标记 <li> 或 list-item 标记。添加 HTML 类时，样式可以被覆盖（以及其他样式被忽略的原因）。此外，您可能是不愉快惊讶这还有什么变化。例如，选项卡也是列表元素。

在我最初提供的那个造型调用中，我使用了li > p。这意味着带有嵌入 <p> 或段落标签的项目符号。选项卡列表中没有使用段落标记，因此确保它们不包含在此更改中。我不会为段落标签设置字体大小，因为这是 HTML 中最常见的标签之一（以及 div 或部门标签）。你可能会改变很多超出预期。

那我怎么知道呢？

打开开发者工具

您可以了解它是如何在幕后记录的一种方法是在您的浏览器中编织和呈现它。右键单击您的网页并选择检查 (Chrome)、开发人员工具 (Firefox) 或您使用的浏览器的任何等效项。我的默认设置是 Chrome，但所有浏览器在开发人员工具中提供的功能都相似。

您的视图应该与此类似。

查找与您的项目符号之一对应的 HTML 元素

在 Chrome 中，有一个带有箭头的框。（在图像中，它位于左中，页面和开发人员工具聚集在一起。）所有的浏览器都有这样的东西。它可以让您更轻松地找到所需内容。如果您将鼠标悬停在网页中的任何位置单击它，在开发人员工具区域中，相应的元素也会突出显示。像这样。

或者，您可以选择开发人员工具的元素窗格中的任何位置来设置焦点，然后按 CMD+F 或 CTRL+F（取决于您的设置）。由于您正在查找项目符号中的内容，因此您可以键入出现在项目符号中的文本。在此图像中，搜索栏位于底部。

从该图像中，您可以看到这是一个 <p> 标记，但其中有很多，因此您可以查看父元素以更具体。因此，如果您查看文本上方，则父级是 <li> 标记。（如果你去下一个父母，你会找到一个<ul> 标签（无序列表标签）。

确定当前大小的来源

当我专注于正确的 HTML 元素标记时，我可以查看分配的样式并找到设置字体大小的位置。

在这张图片的左边，我的元素被选中。在右侧，您可以看到字体大小设置。您可能必须在此窗格中向下滚动才能找到字体大小设置的位置。如果它是继承的，你可能找不到它。

样式设置被忽略？找不到？

如果您查看最右侧并向下滚动，您可以看到将字体大小定向到该元素的任何内容。当您设置被忽略的样式时，这很有用。

现在，这些项目符号具有从四种不同设置中指定的字体大小。这是极右部分的特写。根据这些信息，如果样式被忽略，我可能会使用该类标签来设置样式。

您可以使用此功能做更多的事情，并且可以通过更多方式找到所需内容。不过，这应该可以帮助您入门。

【讨论】：