样式变体

Material Symbols 样式变体概述

Material Symbols 提供三种独特的样式变体，每种都有其视觉特征和用例。与需要为实心版本提供单独字体文件的经典 Material Icons 集不同，Material Symbols 使用可变字体技术，允许通过 FILL 轴调整实心级别。

来源： README.md55-58 README.md60-64

样式详细比较

描边样式

描边样式是 Material Symbols 的默认呈现形式。它具有开放的形状，具有纤细、一致的笔画，定义了图标的轮廓。此样式提供了干净、简约的美感，在需要微妙效果的界面中效果很好。

字体文件： MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf

用例

大多数界面上下文的默认选择
当需要较轻的视觉重量时
适用于具有极简设计语言的界面
当图标需要视觉上不显眼时

圆角样式

圆角样式在所有图标路径上都具有柔和、圆润的角和端点。此样式创造了一种友好、易于亲近的感觉，并与使用圆润组件的界面很好地融合。

字体文件： MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf

用例

具有友好、易于亲近的美感的界面
面向普通消费者的产品
具有圆润 UI 元素的应用程序
当需要更柔和的视觉印象时

锐利样式

锐利样式使用具有精确、锐利角的几何形状。此样式创造了一种技术、精确的印象，在专业或技术环境中效果很好。

字体文件： MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf

用例

专业或技术应用
数据密集型界面
当精度和清晰度是主要关注点时
具有几何、棱角分明设计元素的界面

来源： README.md55-58 README.md55-58 variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf

技术实现

样式变体是通过仓库中单独的可变字体文件实现的。每种样式变体都保持相同的基本图标设计，但对圆角、端点和几何形状应用了不同的样式规则。

来源： variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2

可变字体轴和样式修改

每种 Material Symbols 样式变体都支持四个可变字体轴，这些轴允许动态自定义图标

轴	范围	默认	描述
FILL	0-1	0	控制图标是描边（0）还是实心（1）
GRAD	-25 到 200	0	调整“等级”或视觉重量，而不改变宽度
opsz	20-48像素	24	光学尺寸 - 优化不同显示尺寸的设计
wght	100-700	400	重量 - 控制笔画粗细（100=细，700=粗）

此实现意味着每种样式变体（描边、圆角、锐利）都可以通过调整 FILL 轴以描边和实心模式显示，从而无需像经典 Material Icons 集那样使用单独的“实心”字体文件。

来源： README.md60-64

样式选择指南

一致性注意事项

在项目中实施 Material Symbols 时，建议

选择一种样式变体以贯穿整个界面，以保持视觉一致性
在填充设置上保持一致 - 在整个界面中使用填充或描边图标
在整个界面中应用一致的重量和等级设置
将光学尺寸与使用上下文匹配 - 较大的显示尺寸使用较大的光学尺寸

样式选择表

样式变体	最佳用途	与...搭配效果好	示例用例
描边	干净、简约的界面	网站、生产力应用	仪表板、内容丰富的应用
圆角	友好、易于亲近的体验	消费者应用、教育产品	社交媒体、学习应用
锐利	精确、技术应用	企业软件、数据工具	分析、开发工具

填充用法

FILL 轴在图标的渲染方式上提供了灵活性

FILL: 0 (描边) - 适用于大多数界面上下文，营造视觉上的轻盈感
FILL: 1 (填充) - 营造更强的视觉强调，适用于
- 导航项
- 选中状态
- 重要操作
- 状态指示器

您还可以通过更改 FILL 值（从 0 到 1）在填充和描边状态之间进行动画，以指示选择或状态更改。

来源： README.md58 README.md64

Material Symbols 与 Material Icons 的实现差异

与经典的 Material Icons 集不同，Material Symbols 利用可变字体技术，采用了更有效率的样式变体实现方式。

Material Symbols 相较于 Material Icons 的方法具有多项优势

文件数量减少 - 三个字体文件，而非五个
动态调整 - 可以动态修改填充、重量、等级和光学尺寸
动画支持 - 可以在描边和填充状态之间进行动画
总文件大小更小 - 可变字体比多个静态字体更高效

来源： README.md51-58 README.md75-98

总结

Material Symbols 图标集提供了三种样式变体（描边、圆角和锐利），通过 FILL 可变字体轴均可实现描边和填充两种形式。通过在您的界面中选择并一致地应用一种样式变体，您可以建立一个连贯的视觉语言，以符合您产品的设计美学和沟通目标。

有关如何在项目中使用这些样式变体的实施详情，请参阅使用 Material Symbols。