在整個 R Shiny 應用程序中更改字體系列：CSS/HTML

Question

是否可以更改整個閃亮儀表板應用程序的默認字體？ 包括應用程序中的側邊欄、正文、標題、ggplots 等的字體？

我知道你可以在每個片段中添加 font-family 語句（例如：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"))

或

2. 直接進入你的 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;
}

* = 匹配所有元素