iOS：如何最优展示含多字体、富文本样式的长页面内容？

Hey there! 针对iOS上展示包含多字体样式、颜色及图片的长富文本内容，我结合实际项目踩过的坑和经验，给你梳理几个适配不同场景的最优方案：

这是最常用的原生方案，能覆盖大部分常规需求（比如你截图里的多字体、颜色、内嵌图片）。

核心用法： #

• 用NSAttributedString设置文本的字体、颜色、行间距等样式；
• 内嵌图片通过NSTextAttachment实现，把图片包装成文本附件插入到富文本中；
• 长内容优先用UITextView（自带滚动、性能更稳定），记得关闭编辑功能：textView.isEditable = false。

代码示例： #

// 创建富文本字符串
let attributedString = NSMutableAttributedString()

// 添加普通文本
let normalText = NSAttributedString(string: "这是一段普通样式的文字，", attributes: [
    .font: UIFont.systemFont(ofSize: 16),
    .foregroundColor: UIColor.black
])
attributedString.append(normalText)

// 添加加粗红色文本
let boldRedText = NSAttributedString(string: "搭配加粗红色的内容，", attributes: [
    .font: UIFont.boldSystemFont(ofSize: 18),
    .foregroundColor: UIColor.red
])
attributedString.append(boldRedText)

// 添加内嵌图片
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "your-image")
// 调整图片大小适配文本行高
imageAttachment.bounds = CGRect(x: 0, y: -2, width: 16, height: 16)
let imageText = NSAttributedString(attachment: imageAttachment)
attributedString.append(imageText)

// 赋值给UITextView
let textView = UITextView()
textView.attributedText = attributedString
textView.isEditable = false
textView.isScrollEnabled = true

如果你的需求更复杂（比如文字环绕图片、自定义段落缩进、点击交互），TextKit是苹果原生的高级排版框架，比单纯用NSAttributedString更灵活。

核心用法： #

• 自定义NSTextContainer设置排版规则（比如用exclusionPaths实现文字绕图）；
• 结合NSLayoutManager和NSTextStorage做精细化排版控制；
• 依然可以基于UITextView来承载内容，减少自定义视图的工作量。

代码示例（文字绕图）： #

let textView = UITextView()
textView.attributedText = yourAttributedString
textView.isEditable = false

// 创建图片路径，让文字绕开图片
let imageFrame = CGRect(x: 10, y: 10, width: 80, height: 80)
let exclusionPath = UIBezierPath(rect: imageFrame)
textView.textContainer.exclusionPaths = [exclusionPath]

// 添加图片到textView上
let imageView = UIImageView(image: UIImage(named: "your-image"))
imageView.frame = imageFrame
textView.addSubview(imageView)

如果是SwiftUI项目，苹果在iOS 15+提供了更简洁的AttributedString支持，也可以通过组合多个Text视图快速实现混合样式，内嵌图片也很方便。

两种实现方式： #

1. 原生AttributedString：可以直接从NSAttributedString转换，或者原生构建样式：

var attributedString = AttributedString("这是普通文字")
attributedString.font = .system(size: 16)
attributedString.foregroundColor = .black

let boldRedPart = AttributedString("加粗红色文字")
boldRedPart.font = .system(size: 18, weight: .bold)
boldRedPart.foregroundColor = .red

attributedString.append(boldRedPart)

// 插入图片（通过NSTextAttachment转换）
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "your-image")
if let imageAttributedString = NSAttributedString(attachment: imageAttachment).asAttributedString() {
    attributedString.append(imageAttributedString)
}

ScrollView {
    Text(attributedString)
}

2. 多Text组合：适合样式拆分清晰的场景，代码更直观：

ScrollView {
    Text("这是一段")
        .font(.system(size: 16))
        .foregroundColor(.black)
    + Text("加粗红色")
        .font(.system(size: 18, weight: .bold))
        .foregroundColor(.red)
    + Text("的文字，搭配")
    + Image(systemName: "star.fill")
        .foregroundColor(.yellow)
        .font(.system(size: 16))
}

如果你的富文本内容是从HTML或Markdown格式转换而来，直接用WKWebView是最省心的方案——它会自动解析所有样式、图片，长内容的滚动和排版也经过苹果优化，稳定性很高。

代码示例： #

let webView = WKWebView()
// 示例HTML内容，对应你需要的混合样式
let htmlContent = """
<p style="font-size:16px; color:#333;">普通文字</p>
<p style="font-weight:bold; color:#ff0000; font-size:18px;">加粗红色文字</p>
<img src="your-image-path" style="width:20px; height:20px; vertical-align:middle;" />
"""
webView.loadHTMLString(htmlContent, baseURL: Bundle.main.bundleURL)

选择建议： #

• 常规需求（多字体、颜色、内嵌图）：优先选方案1（UIKit）或方案3（SwiftUI）；
• 复杂排版（文字绕图、自定义段落）：选方案2；
• 内容来自HTML/Markdown：选方案4。

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