如何将verbatimTextOutput的字体系列更改为与Shiny和Shinydashboard中的输入相同？ [英] How to change the font family of verbatimTextOutput to be the same as the input in Shiny and Shinydashboard?

问题描述

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

 ＃加载软件包
库（发光）
库（发光仪表板）
 
＃用户界面
 ui< -dashboardPage（
标头= dashboardHeader（title =），
边栏= dashboardSidebar（
 sidebarMenu（
 menuItem（
 text = Example，
 tabName = tab1 
）
）
），
 body = dashboardBody（
 tabItems（
 tabItem（
 tabName = tab1，
 fluidRow（
 column（
 width = 4，
 numericInput（inputId = Number ，label =一个数字输入，值= NA），
 strong（与数字输入相同的数字），
 verbatimTextOutput（ Number_out）
）
 ）
）
）
）
）
 
服务器<-函数（输入，输出，会话）{
 output $ Number_out< ;-renderText（as.charac ter（input $ Number））
} 
 
＃运行应用程序
 ShinyApp（ui，server）
  

通过运行应用程序并键入数字，我们可以看到 numericInput 和 verbatimTextOutput 。

基于此答案（

好像我有尚未使用正确的字体系列。

解决方案

尝试 font-family：'Source Sans Pro '，'Helvetica Neue'，Helvetica，Arial，sans-serif;

所以您的 tags $ head 将是：

  tags $ head（
 tags $ style（
 HTML（ 
 #Number_out {
字体家族：'Source Sans Pro'，'Helvetica Neue'，Helvetica，Arial，sans-serif; 
字体大小：14px; 
}  
）
）
）
  

编辑

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

然后在右下角看到：

I would like to change the font family of the verbatimTextOutput to be the same as the input in Shiny and Shinydashboard. Here is an example.

# 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)

By running the app and type in a number, we can see that the font family is different in the numericInput and the verbatimTextOutput.

Based on this answer (https://stackoverflow.com/a/48037443/7669809) and this answer (https://stackoverflow.com/a/50784117/7669809), I edited my script as follows.

# 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)

But the font family is still not the same.

It seems like I have not used the correct font family yet. Please let me know how I can achieve this.

解决方案

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

So your tags$head will be:

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

EDIT

In Chrome, if you right click and click on Inspect then scroll down to find relevant style elements:

And on bottom right you can see:

这篇关于如何将verbatimTextOutput的字体系列更改为与Shiny和Shinydashboard中的输入相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！