无法在ggiraph的opts_tooltip中使用sysfonts添加的自定义字体

问题描述 #

使用R语言的ggiraph包时，无法为opts_tooltip工具提示设置自定义字体（如TradeGothicLTStd-Cn18.otf）。尝试了sysfonts和systemfonts方案后，图表标题、标注等元素的字体正常生效，但tooltip的字体始终未应用自定义字体。

会话信息 #

R version 4.1.0 (2021-05-18)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 22631)

Matrix products: default

locale:
[1] LC_COLLATE=Italian_Switzerland.1252  LC_CTYPE=Italian_Switzerland.1252    LC_MONETARY=Italian_Switzerland.1252
[4] LC_NUMERIC=C                         LC_TIME=Italian_Switzerland.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] extrafont_0.20    stringr_1.4.0     showtext_0.9-5    showtextdb_3.0    sysfonts_0.8.8    patchwork_1.3.1   themeustat_0.0.4 
 [8] targets_1.10.1    gibr_0.0.5        ggplot2_4.0.2     ggiraph_0.9.6     reshape2_1.4.4    data.table_1.14.8 dplyr_1.1.4       

loaded via a namespace (and not attached):
 [1] jsonlite_1.8.4          viridisLite_0.4.0       S7_0.2.1                cartography_3.0.0       sp_1.4-5               
 [6] base64url_1.4           fontLiberation_0.1.0    yaml_2.2.1              ggrepel_0.9.3           gdtools_0.5.0          
[11] Rttf2pt1_1.3.9          lattice_0.20-44         pillar_1.11.0           backports_1.2.1         glue_1.4.2             
[16] extrafontdb_1.0         digest_0.6.27           RColorBrewer_1.1-2      plyr_1.8.6              htmltools_0.5.5        
[21] fontBitstreamVera_0.1.1 pkgconfig_2.0.3         magick_2.7.4            purrr_1.1.0             scales_1.4.0           
[26] processx_3.5.2          svglite_2.2.1           secretbase_1.0.1        fontquiver_0.2.1        tibble_3.3.0           
[31] proxy_0.4-26            generics_0.1.0          farver_2.1.0            withr_3.0.2             widgetframe_0.3.1      
[36] cli_3.6.1               magrittr_2.0.1          evaluate_1.0.4          ps_1.9.0                fs_1.5.2               
[41] MASS_7.3-54             xml2_1.3.3              class_7.3-19            textshaping_0.3.6       tools_4.1.0            
[46] lifecycle_1.0.3         callr_3.7.0             kableExtra_1.4.0        compiler_4.1.0          e1071_1.7-8            
[51] systemfonts_1.3.2       rlang_1.1.1             classInt_0.4-3          units_0.7-2             grid_4.1.0             
[56] dichromat_2.0-0         rstudioapi_0.13         htmlwidgets_1.5.4       crosstalk_1.1.1         igraph_2.1.4           
[61] labeling_0.4.2          rmarkdown_2.22          gtable_0.3.6            codetools_0.2-18        DBI_1.1.1              
[66] schedeustat_0.0.6.7     R6_2.5.1                knitr_1.43              utf8_1.2.2              fastmap_1.1.0          
[71] rgeos_0.5-7             tarchetypes_0.13.0      KernSmooth_2.23-20      stringi_1.7.4           parallel_4.1.0         
[76] Rcpp_1.1.1              vctrs_0.6.4             sf_1.0-2                leaflet_2.0.4.1         tidyselect_1.2.0       
[81] xfun_0.53       

尝试过的代码 #

sysfonts方案

library(ggplot2)

iris$Year <- seq(1951, 2000, 1)

tab_01 <- iris[, c("Year", "Species", "Sepal.Length")]

graph_01 <- ggplot(tab_01, 
                            aes(x = Year, 
                                y = Sepal.Length, 
                                color = factor(Species), 
                                group = Species)) +
  geom_line_interactive(linewidth = 0.5, 
                        data_id = factor(tab_01$Species),
                        hover_nearest = FALSE) +
  geom_point_interactive(size = 1,
                         data_id = factor(tab_01$Species),
                         tooltip = paste0(tab_01$Year,", ", factor(tab_01$Species), ": ", tab_01$Sepal.Length),
                         hover_nearest = FALSE) +
  labs(title = "This is the title of the graph the use the right font, from 1950 to 2000", 
                size = 10, 
                y = NULL,
                caption = "This is the caption of the graphic with the right font") +
  theme(axis.text.x = element_text(angle = 90, 
                                            vjust = 0.5, 
                                            hjust = 1)) +
  theme(text = element_text(family = "Gothic_condensed",
                                     size = 10))

graph_01


# Add the new font
download.file("https://github.com/AllThingsSmitty/fonts/raw/refs/heads/master/TradeGothicLtCondensed18/TradeGothicLTStd-Cn18.otf", "TradeGothicLTStd-Cn18.otf", mode = "wb")
sysfonts::font_add(family = "Gothic_condensed", regular = "TradeGothicLTStd-Cn18.otf")

#Create "css" option for the tooltip

tooltip_css <- "
  padding: 10px;
  border-radius: 5px;
  font-family: 'Gothic_condensed';
  font-size: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5)"


# Reload the graphic with "ggiraph" package
# The title, the caption and labels font is the right one, but not the one of the tooltip

graph_02 <- ggiraph::girafe(ggobj = graph_01,
                            options = list(opts_tooltip(css = tooltip_css, use_fill = TRUE),
                                           opts_hover(css = "stroke-width:2;"),   
                                           opts_hover_inv(css = "opacity:0.3;")))

graph_02

systemfonts方案

font_name <- "Gothic_import"

fonts <- systemfonts::system_fonts()

font_info <- fonts[grepl("^Trade", fonts$family), c("path", "index", "name", "family")]

font_info

#path                                                  index name                  family   
#<chr>                                                 <int> <chr>                 <chr>    
#  1 "C:\...\Windows\Fonts\Trade Gothic LT.ttf"     0 TradeGothicLT         TradeGot~
#  2 "C:\...\Windows\Fonts\Trade Gothic LT Std Condensed No. 18.otf"     0 TradeGothicLTStd-Cn18 Trade Go~

font_info_select <- font_info[2, ]

systemfonts::register_font(font_name,
                           plain = list(font_info_select $path, font_info_select $index))

tooltip_css <- "
  padding: 10px;
  border-radius: 5px;
  font-family: 'Gothic_import';
  font-size: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5)"

graph_02 <- ggiraph::girafe(ggobj = graph_01,
                            options = list(opts_tooltip(css = tooltip_css, use_fill = TRUE),
                                           opts_hover(css = "stroke-width:2;"),   
                                           opts_hover_inv(css = "opacity:0.3;")))

graph_02

解决方案 #

核心原因 #

ggiraph的tooltip是通过浏览器渲染的HTML元素，无法直接识别R环境中用sysfonts/systemfonts注册的自定义字体名称，必须使用浏览器能识别的字体标识：要么是系统已安装字体的真实名称，要么是通过CSS嵌入的web字体。

方法一：使用系统已安装字体的真实名称 #

1. 先确认字体在系统中的真实名称：

fonts <- systemfonts::system_fonts()
# 筛选目标字体
subset(fonts, grepl("TradeGothic", name))

找到输出中name字段的值（比如TradeGothicLTStd-Cn18）。

2. 在tooltip的CSS中直接使用该真实名称：

tooltip_css <- "
  padding: 10px;
  border-radius: 5px;
  font-family: 'TradeGothicLTStd-Cn18';
  font-size: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5)
"

# 生成交互式图表
graph_02 <- ggiraph::girafe(ggobj = graph_01,
                            options = list(opts_tooltip(css = tooltip_css, use_fill = TRUE),
                                           opts_hover(css = "stroke-width:2;"),   
                                           opts_hover_inv(css = "opacity:0.3;")))
graph_02

方法二：嵌入Base64编码字体（跨环境兼容） #

如果需要在未安装目标字体的环境中使用，可以将字体文件编码为Base64，通过CSS的@font-face嵌入：

1. 安装base64enc包（如果未安装）：

install.packages("base64enc")

2. 编码字体并生成包含嵌入字体的CSS：

library(base64enc)

# 读取字体文件并编码
font_path <- "TradeGothicLTStd-Cn18.otf"
font_base64 <- base64encode(font_path)

# 构建包含@font-face的CSS
tooltip_css <- paste0("
  @font-face {
    font-family: 'Gothic_condensed';
    src: url(data:font/otf;base64,", font_base64, ") format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  .tooltip {
    padding: 10px;
    border-radius: 5px;
    font-family: 'Gothic_condensed';
    font-size: 15px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  }
")

# 生成交互式图表
graph_02 <- ggiraph::girafe(ggobj = graph_01,
                            options = list(opts_tooltip(css = tooltip_css, use_fill = TRUE),
                                           opts_hover(css = "stroke-width:2;"),   
                                           opts_hover_inv(css = "opacity:0.3;")))
graph_02

内容的提问来源于stack exchange，提问作者Ike_02