css - 在 Shiny 的文本行中更改一个单词/子字符串的字体

Question

在我 Shiny 的应用程序中，我有一个 css 文件来整理大多数东西的样式。但是，我正在为一个元素而苦苦挣扎，那就是我希望在一行文本中更改一个单词的字体。

我知道如何更改某些元素，例如将其设为粗体或不同的颜色，但我希望它是不同的字体，这似乎并不那么明显。如果我只为一个词尝试类似的操作，我最终会打印出 HTML，因为它什么也没做。我对 HTML 或 css 不是很熟悉，所以我可能会遗漏一些东西，但在这里找不到具有相同特定问题的问题。

示例代码如下:

用户界面

htmlOutput("example_text)

服务器

function(input, output, session) {
output$example_text <- renderUI({
                                paste0("I want to make ", "this", " a different font")
                               })
}

Server v2(将单词加粗但不更改字体系列)

function(input, output, session) {
output$example_text <- renderUI({
         HTML(paste0("I want to make ", 
              "<font-family=\"Courier New\"><b>", "this", "</font></b>",
              " a different font")
              )
                               })
}

Answer 1

据我所知，您可以尝试使用 HTML()，但您会遇到将文本保持在一行中的问题。你可以在这里得到一些帮助:how to have text of 2 font sizes in same line in HTML? .

您可以使用 tags$style() 添加的 css:

  tags$style('
    #mydiv{font-family:"Arial";}
    #mydiv b{font-family:"Courier New";}
  '),

完整代码如下:

ui <- fluidPage(
  tags$style('
    #mydiv{font-family:"Arial";}
    #mydiv b{font-family:"Courier New";}'),
  htmlOutput("example_text")
)

server <- function(input, output) {
  output$example_text <- renderUI({
    HTML("<div id='mydiv'>I want to make <b>this</b> a new font.</div>")
  })
}

shinyApp(ui, server)