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

3
我找到了一个使用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

有人能展示一下如何做这个吗?

谢谢!

1个回答

2

BLUF或更为知名的TL;DR

我将给出您的答案,然后如果您继续阅读,我将向您展示我如何知道答案。

顺便说一句,很多人仍然在样式标签中使用type,但它实际上已经被弃用了。这不会对任何事情造成伤害,但也没有任何作用。

<style> 
li > p {  
  font-size: 1.2em;
} 
</style>
em是一个相对大小。如果您对字体大小或为什么这很重要不太了解,可以在这里阅读更多内容
要更改您的项目符号,您需要修改HTML标记<li>或列表项标记。不幸的是,添加HTML类后,样式可能会被覆盖(除了其他样式被忽略的原因)。此外,您可能会惊讶地发现这会影响到其他方面。例如,选项卡也是列表元素。
在初始提供的样式调用中,我使用了li > p。这意味着带有嵌入式<p>或段落标签的项目符号。选项卡列表中没有使用段落标签,因此这确保它们不包括在此更改中。我不会设置段落标签的字体大小,因为那是HTML中最常见的标签之一(除了分区或
标签)。您可能会意外地改变更多的东西。
那么我怎么知道这个问题?

打开开发工具

其中一种找出背后的文档方式是在浏览器中编织和呈现它。右键单击您的网页,然后选择检查(Chrome),开发人员工具(Firefox)或您使用的浏览器的等效选项。默认情况下是Chrome,但是所有浏览器在开发人员工具中提供的功能都是类似的。

enter image description here

您的视图应该类似于此。

enter image description here

找到与您的项目符号相对应的HTML元素

在Chrome中,有一个带有箭头指向它的方框。(在该图像中,它位于页面和开发人员工具汇合处的中间左侧。)所有浏览器都有类似的东西。如果点击其中的任何位置,鼠标悬停在网页中,在开发人员工具区域,相应的元素也会被突出显示。就像这样。

enter image description here

或者,您可以在开发工具的元素面板中选择任何位置来设置焦点,然后按下CMD+F或CTRL+F(取决于您的设置)。由于您正在寻找项目符号中的内容,因此可以输入出现在项目符号中的文本。在此图像中,搜索栏位于底部。

enter image description here

从该图像中,您可以看到这是一个<p>标签,但是有许多这样的标签,因此您可以查看父元素以更加具体。因此,如果您查看文本上方,则父级是<li>标签(如果您转到下一个父级,则会找到无序列表标签<ul>)。

确定当前大小的来源

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

在此图像中,左侧选中了我的元素。右侧显示了字体大小设置。您可能需要在此窗格中向下滚动才能找到字体大小设置。如果继承,则可能找不到它。

enter image description here

样式设置被忽略?找不到它?

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

enter image description here

现在,这些项目符号具有来自四个不同设置的字体大小。以下是远程右侧部分的近距离图像。从这些信息中,如果样式被忽略,我可能会使用该类标签作为样式设置。

enter image description here

您可以使用此工具进行更多操作,并找到更多查找所需内容的方法。但是,这应该让您入门了。


@ Kat:我对这个答案感到无语!它看起来像是从专业教科书中摘抄出来的 - 非常感谢你花费的所有时间和精力! - stats_noob
到了一天的最后,有没有一些简单的命令可以输入来更改文本的字体/字号?非常感谢你的帮助! - stats_noob
1
底线:不行。它会根据文档中添加的主题、样式以及有时候的选项或默认值而改变。除了我在答案中提供的方法,还有其他找到信息的方式。实际上,有很多种方法。没有适用于所有情况的默认设置。我可以说,在你使用几次之后,它会变得更容易...直到你决定进行非HTML类型的输出为止... - Kat
@ Kat:你好,Kat!今天过得怎么样?如果你有时间,能否请你看一下这个问题?https://dev59.com/78Xsa4cB1Zd3GeqPRBan 我已经在上面工作了几天,但似乎无法解决。非常感谢! - stats_noob

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接