SymbolGlyph 与文字排版 — 鸿蒙系统的字体与图标体系

一、引言

字体和图标是 UI 设计的基石，直接影响应用的视觉品质和用户体验。鸿蒙系统提供了 SymbolGlyph（符号字体）组件，让开发者能够方便地使用系统内置符号图标，同时提供了丰富的文字排版属性实现精细的文本控制。MoneyTrack 在我的页面中使用 SymbolGlyph 展示钻石图标，配合精美的字体排版，打造了清晰、一致的用户界面。

二、核心知识点

2.1 SymbolGlyph 符号字体

SymbolGlyph 是鸿蒙系统提供的一种特殊文本组件，用于渲染系统内置的符号图标（SF Symbols 风格）。与 Image 图片相比，SymbolGlyph 具有以下优势：

• 矢量渲染：不失真，适配任意屏幕密度
• 色彩灵活：支持单色和多色渲染
• 体积小巧：不占用额外资源包大小
• 随系统更新：新系统版本会新增符号

SymbolGlyph 支持丰富的样式属性来控制图标外观：

SymbolGlyph($r('sys.symbol.diamond'))
  .fontSize(24)              // 图标尺寸
  .fontColor('#FFD700')      // 图标颜色
  .fontWeight(FontWeight.Bold) // 图标粗细
  .renderingMode(SymbolRenderingMode.SINGLE) // 渲染模式

renderingMode 属性控制符号的着色方式，对于多色符号尤其重要：

renderingMode 取值	说明	适用场景
SymbolRenderingMode.SINGLE	单色模式，所有图层使用同一颜色	通用图标、导航栏
SymbolRenderingMode.MULTI_COLOR	多色模式，保留符号原始多色设计	天气、类别图标
SymbolRenderingMode.PALETTE	调色板模式，可自定义各层级颜色	品牌自定义配色

// 多色符号示例——保留系统默认配色
SymbolGlyph($r('sys.symbol.heart'))
  .fontSize(28)
  .renderingMode(SymbolRenderingMode.MULTI_COLOR)

// 调色板模式示例——自定义层级颜色
SymbolGlyph($r('sys.symbol.share'))
  .fontSize(24)
  .renderingMode(SymbolRenderingMode.PALETTE)
  .fontColor(['#FF6B6B', '#4ECDC4']) // 不同层级指定不同颜色

2.2 常用系统符号列表

鸿蒙系统内置了大量常用符号，以下是在 MoneyTrack 中常用的系统符号：

系统符号资源 ID	描述	常用位置
sys.symbol.heart	心形（可填充/轮廓切换）	收藏按钮
sys.symbol.star	星形	评分、标记
sys.symbol.share	分享符号	分享按钮
sys.symbol.setting	齿轮设置	设置入口
sys.symbol.search	搜索放大镜	搜索栏
sys.symbol.diamond	钻石	会员等级
sys.symbol.wallet	钱包	资产入口
sys.symbol.chart_pie	饼图	统计视图

2.3 字体排版属性

ArkTS 的 Text 组件提供了极为丰富的排版属性。除了基本的字体大小和颜色外，还包括：

Text('¥ 12,800.00')
  .fontSize(28)
  .fontWeight(FontWeight.Bold)
  .fontColor('#333333')
  .letterSpacing(1)
  .decoration({ type: TextDecorationType.None })    // 文本装饰（下划线/删除线）
  .textCase(TextCase.Normal)                        // 大小写转换
  .textShadow({ radius: 2, color: '#00000020', offsetX: 0, offsetY: 2 }) // 文字阴影
  .lineHeight(36)
  .textAlign(TextAlign.End)

详细属性说明：

属性	说明	常用值
decoration	文本装饰线	TextDecorationType.Underline / LineThrough / Overline / None
textCase	大小写转换	TextCase.Normal / LowerCase / UpperCase
textShadow	文字阴影	设置模糊半径、颜色、偏移量
letterSpacing	字间距	正值扩大、负值紧缩
lineHeight	行高	一般设为字号的 1.2~1.5 倍

三、图标选型决策树

在 MoneyTrack 中选择图标方案时，遵循以下决策流程：

四、自定义字体注册

当系统字体无法满足需求时，可以注册并使用自定义字体：

// 在 EntryAbility 或页面初始化时注册
import { font } from '@kit.ArkUI'

font.registerFont({
  familyName: 'MyBrandFont',
  familySrc: '/fonts/mybrand-regular.ttf'
})

// 在组件中使用
Text('品牌文案')
  .fontFamily('MyBrandFont')
  .fontSize(20)

五、项目代码案例

5.1 MineView 中 SymbolGlyph 钻石图标

在 products/entry/src/main/ets/views/mine/MineView.ets 中，使用 SymbolGlyph 在"我的"页面的会员等级区域展示钻石图标：

SymbolGlyph($r('sys.symbol.diamond'))
  .fontSize(32)
  .fontColor('#FFD700')
  .fontWeight(FontWeight.Bold)

• 使用系统符号 sys.symbol.diamond 替代自定义图片
• 金色 #FFD700 突出会员身份的尊贵感
• 矢量渲染确保在不同屏幕密度下均清晰

5.2 金额数字排版

在账单卡片和资产卡片中，金额数字采用精细的排版控制：

• 金额数字使用大字号（20-28sp）和 Bold 字重
• 货币符号（¥）字号略小于数字
• 字间距适当加大 letterSpacing(1) 提高可读性
• 收入使用绿色，支出使用红色，一目了然
• 使用 textShadow 增加数字立体感

5.3 图标使用策略对比

场景	推荐方案	原因
通用图标（搜索、设置、返回）	SymbolGlyph	系统内置，体积小
品牌图标（应用 Logo）	$r 图片资源	自定义设计，品牌化
复杂图标（带多色渐变）	$r SVG 图片	矢量支持，设计灵活
简单占位图标	Text 字符	零资源开销

六、最佳实践总结

1. 系统符号优先：通用功能优先使用 SymbolGlyph，减少资源包体积。
2. 符号语义化：选择与含义匹配的符号，避免误导用户。例如"删除"用垃圾桶符号而非叉号。
3. 渲染模式按需选择：单色用于导航栏，多色保留图标原始设计，调色板模式用于品牌定制。
4. 字体大小规范：定义统一的字体层级（如 12/14/16/18/20/24/28sp），保持设计一致性。
5. 自定义字体谨慎使用：仅在品牌需要时注册自定义字体，过多字体会增加包体积。

七、参考文档

• SymbolGlyph 组件 API
• 系统符号列表
• 字体排版指南
• 自定义字体注册