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 字符 | 零资源开销 |
六、最佳实践总结
- 系统符号优先：通用功能优先使用 SymbolGlyph，减少资源包体积。
- 符号语义化：选择与含义匹配的符号，避免误导用户。例如"删除"用垃圾桶符号而非叉号。
- 渲染模式按需选择：单色用于导航栏，多色保留图标原始设计，调色板模式用于品牌定制。
- 字体大小规范：定义统一的字体层级（如 12/14/16/18/20/24/28sp），保持设计一致性。
- 自定义字体谨慎使用：仅在品牌需要时注册自定义字体，过多字体会增加包体积。
七、参考文档
- SymbolGlyph 组件 API
- 系统符号列表
- 字体排版指南
- 自定义字体注册
