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/NonetextCase大小写转换TextCase.Normal/LowerCase/UpperCasetextShadow文字阴影设置模糊半径、颜色、偏移量letterSpacing字间距正值扩大、负值紧缩lineHeight行高一般设为字号的 1.2~1.5 倍三、图标选型决策树在 MoneyTrack 中选择图标方案时遵循以下决策流程是搜索/设置/返回/收藏否是应用 Logo / 品牌元素否简单形状勾/叉/箭头多色/渐变/复杂图形需要图标展示是否为通用系统功能SymbolGlyph 系统符号是否为品牌视觉资产$r 图片资源PNG/SVG图标复杂度如何Text 字符替代$r SVG 矢量图优点体积小、随系统更新、矢量缩放优点设计可控、强品牌感优点零资源开销、渲染极快优点多色支持、不失真四、自定义字体注册当系统字体无法满足需求时可以注册并使用自定义字体// 在 EntryAbility 或页面初始化时注册import{font}fromkit.ArkUIfont.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系统符号列表字体排版指南自定义字体注册