用途:该技能用于在界面中实现 Material Design 3(M3)排版,从 Material You 基础字阶到 M3 Expressive 的 30 种样式扩展体系,帮助建立清晰、可读且富有表现力的文字层级。
主要能力:覆盖 15 种基础字阶(Display、Headline、Title、Body、Label 各三级),并新增 15 种强调变体(每角色一个,通过更高字重实现)。强调样式用于行动号召、重要标题与数字、编辑强调、仪表盘关键数据、引导页与功能亮点。M3 Expressive 默认采用“中等对比”策略,在可读性与表现力之间取得平衡。
使用方式:以 CSS 自定义属性定义排版令牌,如 --md-sys-typescale-display-large-size、--md-sys-typescale-body-large-weight 等,并为基础与强调样式分别建立可复用类(如 .display-large、.body-large-emphasized)。可变字体可通过 @font-face 声明 font-weight 范围,并用 font-variation-settings 调整 wght、wdth。响应式可用 clamp() 或容器查询。
适用场景:文本样式、字体层级、按钮与卡片标题、列表项、页面标题、长文正文等 UI 排版实现。
限制与注意:强调样式应克制使用,避免整屏强调;正文行宽建议 50–75 字符,正文对比度至少 4.5:1,大字号至少 3:1;尺寸使用 rem/em 等相对单位;字体加载建议 font-display: swap 并做子集化。资料未提供具体安装命令、收费或平台信息。