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

时间:2017-07-27 19:34:44

标签: html css r fonts shiny

是否可以更改整个闪亮仪表板应用的默认字体?包括侧边栏,正文,标题,应用程序中的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",

3 个答案:

答案 0 :(得分:2)

您可以将font-family放在body选择器

&#13;
&#13;
body {
  font-family: Arial;
}
&#13;
&#13;
&#13;

或者使用通用选择器*将更改每个元素

&#13;
&#13;
* { font-family: Arial; }
&#13;
&#13;
&#13;

答案 1 :(得分:0)

嗯,这不是我最喜欢这样做的,但这会奏效。很确定你不得不摇滚!important,否则你会被一些元素的级联击败。

编辑:在几个网站上进行测试以确认。没有!important

,无法改变一切

CSS:

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

* =匹配所有元素

答案 2 :(得分:0)

@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"))

OR

  1. 直接进入您的R代码:
ui <- dashboardPage(dashboardHeader(), dashboardSidebar(), dashboardBody(),
                  tags$head(tags$style(HTML('* {font-family: "Arial"};'))))