html - 如何将verbatimTextOutput的字体系列更改为与Shiny和Shinydashboard中的输入相同？

Question

我想将字体系列更改verbatimTextOutput为与 Shiny 和 Shinydashboard 中的输入相同。这是一个例子。

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- dashboardPage(
    header = dashboardHeader(title = ""),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "Example",
          tabName = "tab1"
        )
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          fluidRow(
            column(
              width = 4,
              numericInput(inputId = "Number", label = "A numeric input", value = NA),
              strong("The same number as the numeric input"),
              verbatimTextOutput("Number_out")
            )
          )
        )
      )
    )
  )

server <- function(input, output, session){
  output$Number_out <- renderText(as.character(input$Number))
}

# Run the app
shinyApp(ui, server)

通过运行应用程序并输入一个数字，我们可以看到字体系列在numericInput和 中是不同的verbatimTextOutput。

基于这个答案（https://stackoverflow.com/a/48037443/7669809）和这个答案（https://stackoverflow.com/a/50784117/7669809），我编辑了我的脚本如下。

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- dashboardPage(
    header = dashboardHeader(title = ""),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "Example",
          tabName = "tab1"
        )
      )
    ),
    body = dashboardBody(
      tags$head(
        tags$style(
          HTML(
            '#Number_out {
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 12px;
            }'
          )
          )
        ),
      tabItems(
        tabItem(
          tabName = "tab1",
          fluidRow(
            column(
              width = 4,
              numericInput(inputId = "Number", label = "A numeric input", value = NA),
              strong("The same number as the numeric input"),
              verbatimTextOutput("Number_out")
            )
          )
        )
      )
    )
  )

server <- function(input, output, session){
  output$Number_out <- renderText(as.character(input$Number))
}

# Run the app
shinyApp(ui, server)

但是字体系列仍然不一样。

看来我还没有使用正确的字体系列。请让我知道如何实现这一目标。

标签： htmlcssrshinyshinydashboard

Answer 1

尝试font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;

所以你的tags$head意愿是：

tags$head(
  tags$style(
    HTML(
      "#Number_out {
       font-family:  'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
       font-size: 14px;
        }"
    )
  )
)

编辑

在 Chrome 中，如果您右键单击并单击 Inspect，然后向下滚动以查找相关样式元素：

在右下角你可以看到：