为什么 SwiftUI 中 Image(icon).font(...) 不起作用

一、问题现象

在 SwiftUI 中，很多开发者（尤其是初学者）都会写出类似这样的代码：

Image(icon)
    .resizable()
    .scaledToFit()
    .font(.system(size: 12))

但实际运行后会发现：

图片尺寸、样式完全没有变化，font 似乎被忽略了

而当我们换成：

Image(systemName: "star.fill")
    .font(.system(size: 12))

却又是完全生效的。

这并不是 SwiftUI 的 bug，而是一个非常重要的设计差异。

二、关键结论（一句话版）

font 只对“字体驱动的视图”有效，而普通 Image 不是字体视图。

要真正理解这句话，我们需要拆开 SwiftUI 中 Image 的两种本质类型。

三、SwiftUI 中 Image 的两种“身份”

1️⃣ 普通图片（位图 Image）

Image("icon")        // Assets / png / jpg / webp

本质：

• 像素位图（Bitmap）
• 尺寸 = 图片本身的像素大小
• 渲染方式 ≈ UIImage / NSImage

👉 它是一个 图像容器（Image View）

2️⃣ SF Symbols（符号 Image）

Image(systemName: "star.fill")

本质：

• 字体符号（Symbol Font）
• 由矢量路径组成
• 与 Text 使用同一套字体系统

👉 它是一个 “用字体画出来的图形”

四、font 在 SwiftUI 中的真实作用对象

1️⃣ font 是什么？

在 SwiftUI 的语义模型中：

.font(_:)

并不是一个“万能样式”，而是：

环境中用于排版 Glyph（字形）的字体描述

它主要影响三类视图：

2️⃣ 为什么 SF Symbols 能吃 font？

因为 SF Symbols：

• 本质是 字体字形
• Apple 把它们设计成 “Symbol Font”
• 大小 = font.pointSize
• 粗细 = font.weight

例如：

Image(systemName: "heart.fill")
    .font(.system(size: 24, weight: .bold))

等价于：

Text("♥︎")
    .font(.system(size: 24, weight: .bold))

五、为什么普通 Image 完全不理 font？

1️⃣ 位图没有“字体”概念

Image("icon")

它的渲染逻辑是：

读取像素 → 显示像素 → 按 frame / scale 适配

而不是：

选择字体 → 计算字形 → 排版 → 渲染

👉 font 对它来说没有任何数学意义

2️⃣ SwiftUI 没有隐式“位图转字体”机制

SwiftUI 的设计原则之一是：

修饰符只对“语义上匹配的视图”生效

如果 font 能影响普通 Image，会带来严重问题：

• 字体单位（pt） vs 像素单位（px）混乱
• 不同分辨率下行为不可预测
• 破坏 SwiftUI 的 declarative 语义一致性

所以 SwiftUI 直接选择忽略。

六、为什么代码不报错？

这是一个非常“SwiftUI 风格”的设计点。

Image("icon")
    .font(.system(size: 12)) // ❌ 无效，但不报错

原因是：

• font 是一个 ViewModifier
• SwiftUI 允许 modifier 挂在任意 View 上
• 是否生效 → 由 View 自己决定

👉 这也是 SwiftUI 的声明式哲学：

“描述你想要什么，而不是强制它一定生效”

七、正确控制普通 Image 尺寸的方式

✅ 使用 frame

Image("icon")
    .resizable()
    .scaledToFit()
    .frame(width: 12, height: 12)

✅ 使用 scaleEffect

.scaleEffect(0.8)

❌ 不要对位图 Image 使用 font

八、一个对比总结表（非常重要）