如何在Jetpack Compose应用中正确显示Unicode电源符号？

问题原因 #

默认系统字体可能未包含⏽（U+23FD）和⏾（U+23FE）这两个Unicode符号的字形，导致显示异常（通常表现为方框或占位符）。

解决步骤 #

1. 选择支持目标符号的字体

优先选择以下覆盖完整Unicode符号集的字体：

• Noto Sans Symbols：Google开源字体，适配绝大多数Unicode符号
• Segoe UI Symbol：微软出品，对设备控制类符号支持完善
• Roboto：Android系统默认字体的部分变体也支持这类符号

2. 在Jetpack Compose中集成并使用字体

方式一：打包字体到应用（推荐，确保全设备兼容性）

• 将字体文件（如noto_sans_symbols.ttf）复制到项目的res/font目录（目录不存在则手动创建）
• 在Compose中定义字体族：

  val symbolFont = FontFamily(
      Font(R.font.noto_sans_symbols)
  )
  

• 修改原代码中的Text组件，指定字体：

  var selectedIndex by remember { mutableIntStateOf(0) }
  val options = listOf("\u23fd", "\u23fe")
  val symbolFont = FontFamily(Font(R.font.noto_sans_symbols))
  
  SingleChoiceSegmentedButtonRow(modifier = Modifier
      .width(80.dp)
      .height(40.dp)) {
      options.forEachIndexed { index, label ->
          SegmentedButton(
              shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
              colors = SegmentedButtonDefaults.colors(
                  activeContainerColor = Color.DarkGray,
                  activeContentColor = Color.White
              ),
              onClick = { selectedIndex = index },
              selected = selectedIndex == index,
              icon = {}
          ) {
              Text(
                  label,
                  fontFamily = symbolFont,
                  fontSize = 18.sp // 可按需调整字号
              )
          }
      }
  }
  

方式二：使用系统内置字体

如果设备已预装支持目标符号的字体，可直接指定系统字体名称：

Text(
    label,
    fontFamily = FontFamily.SansSerif, // 部分设备的SansSerif包含符号支持
    // 或指定具体字体名称：FontFamily("Segoe UI Symbol")
)

注意：这种方式兼容性较差，不同设备的系统字体差异可能导致符号仍无法正常显示。

验证方法 #

可先通过系统字体查看工具确认目标字体是否包含⏽和⏾符号，再集成到项目中测试显示效果。

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