在整个 R Shiny App 中更改字体系列：CSS/HTML

Question

是否可以更改整个闪亮仪表板应用程序的默认字体？包括应用程序内的侧边栏、正文、标题、ggplots 等的字体？

我知道您可以在每件作品中添加字体系列声明 （例如：h2(strong(textOutput("t")), style = "font-family: 'Arial';")), 但我希望我的整个应用程序都使用 Arial，并且我不想为每个功能编写一行代码。有捷径吗？

此外，如果可能，内联 CSS 优于单独的 css 文件。

谢谢， 莎拉

编辑：

这是我的一些代码。你能告诉我我应该把必要的 CSS 放在哪里吗？

body<-dashboardBody( tags$style(".content {background-color: black;}"),
                 useShinyjs(),
                 tags$style(type='text/css', ".skin-blue .main-header .logo {background-color: #000000}" ),
                 tags$style(type='text/css', ".skin-blue .main-header .logo:hover {background-color: #000000}"),
                 tags$style(type='text/css', ".skin-blue .main-header .navbar {background-color: #000000}"),
                 tags$style(type="text/css",".shiny-output-error { visibility: hidden; }",".shiny-output-error:before { visibility: hidden; }"),
                 fluidPage(
                   img(src="img2.PNG",height="100%", width="100%",style='padding:0px;'),
                   br(),br(),
                   tabBox("Menu Database", width = 12,
                          tabPanel("Menu Database", 
                                   tabsetPanel(
                                     tabPanel("LTO Survey results",

Answer 1

您可以将所需的font-family 放入body 选择器中

body {
  font-family: Arial;
}

或者使用通用选择器* 会改变每个元素

* { font-family: Arial; }

Answer 2

@David Kris 接受的答案是绝对正确的，以防万一有人（比如我）需要更多详细说明。 正如他的回答中提到的，插入代码

 * { font-family: "Arial"; }

在

1. 一个 css 文件 (shiny.rstudio.com/articles/css.html)，适合那些懒惰的人（比如我）：

• 在您的应用目录中创建一个文件夹 www，
• 仅使用上面的代码将 bootstrap_custom.css 文件放入其中，
• 在您的 R 代码中，使用

ui <- dashboardPage(dashboardHeader(), dashboardSidebar(), dashboardBody(),
                  tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "bootstrap_custom.css"))

或

1. 直接进入您的 R 代码：

ui <- dashboardPage(dashboardHeader(), dashboardSidebar(), dashboardBody(),
                  tags$head(tags$style(HTML('* {font-family: "Arial"};'))))

Answer 3

好吧，这不是我最喜欢这样做的，但这会奏效。很确定你将不得不摇滚!important，否则你会在某些元素上被级联击败。

编辑：在几个网站上进行了测试以确认。没有!important 就无法改变一切@

CSS：

* {
  font-family: Arial, sans-serif !important;
}

* = 匹配所有元素