Swift-Markdown-UI 中动态字体缩放与自定义字体的正确使用方式

在 SwiftUI 开发中，Swift-Markdown-UI 是一个强大的库，用于渲染 Markdown 内容。最近版本更新后，一些开发者在使用自定义字体时遇到了动态字体缩放失效的问题。本文将深入分析这一问题的原因，并提供正确的解决方案。

问题现象

开发者在使用 Swift-Markdown-UI 2.3.1 版本时发现，当在主题中使用自定义字体并设置绝对字体大小时，系统动态字体缩放功能失效。具体表现为：当用户在系统设置中调整文字大小时，使用自定义主题的 Markdown 内容不会随之缩放。

问题根源

问题的根本原因在于字体大小的设置方式。在 Swift-Markdown-UI 中，使用绝对点大小（如 FontSize(28)）会重置字体缩放比例为1，导致动态字体缩放失效。这是设计上的预期行为，而非 bug。

在 2.3.1 版本之前，由于动态字体缩放被错误地应用了两次，这种使用方式看似正常工作，但实际上是不正确的实现方式。

解决方案

正确的做法是使用相对大小来调整不同块和文本样式的字体大小。可以使用以下两种相对单位：

1. .em：基于父元素字体大小的相对单位
2. .rem：基于根元素字体大小的相对单位

绝对点大小只应用于基础文本样式。

推荐实现方式

以下是一个正确实现动态字体缩放的自定义主题示例：

extension Theme {
  static let myTheme = Theme()
  .heading3 { config in
    config.label
    .markdownTextStyle {
      FontFamily(.custom("trebuchet MS"))
      FontWeight(.semibold)
      FontSize(.em(1.5))  // 使用相对大小
    }
  }
  .text {
    FontFamily(.custom("menlo"))
    FontSize(16)  // 只在基础文本样式中使用绝对大小
  }
}

最佳实践

1. 基础字体设置：在 .text 样式中设置基础字体和绝对大小
2. 相对大小调整：对于标题等需要不同大小的文本，使用 .em 或 .rem 单位
3. 字体家族继承：通常只需要在基础 .text 样式中设置字体家族，其他样式会继承
4. 权重调整：可以使用 FontWeight 来调整字重，而不影响字体缩放

总结

Swift-Markdown-UI 2.3.1 版本修复了动态字体缩放被应用两次的问题，这要求开发者更规范地使用字体大小设置。通过使用相对大小单位，可以确保自定义字体同时支持动态缩放功能。理解这一机制后，开发者可以更灵活地创建既美观又符合可访问性要求的 Markdown 内容。