可变字体技术

相关源文件

• variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf
• variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2
• variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf
• variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2

本页面介绍了 Material Symbols 中使用的可变字体技术。Material Symbols 是 Material Design Icons 存储库中当前的图标系统。可变字体技术允许在单个字体文件中跨多个设计轴自定义图标，从而在减小文件大小的同时实现前所未有的灵活性。

有关 Material Symbols 不同样式变体（Outlined、Rounded、Sharp）的信息，请参阅 样式变体。有关在项目中使用 Material Symbols 的实现细节，请参阅 使用 Material Symbols。

什么是可变字体？

可变字体是字体技术的一项演进，它允许单个字体文件像多个字体一样工作。与需要为每种样式变体（粗细、宽度等）使用单独文件的传统字体不同，可变字体使用插值在定义的空间内生成任何样式。

在 Material Symbols 的上下文中，可变字体技术使得图标可以在四个设计轴上进行自定义，同时保持一个紧凑的文件。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-50
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:1-20

可变字体架构

Material Symbols 可变字体基于支持可变字体的 OpenType 字体格式规范构建。每个字体文件包含多个表，这些表定义了字形在设计空间中的变化方式。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-10
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:3-25

四个设计轴

Material Symbols 可变字体实现了四个不同的设计轴，可以独立或组合调整。

轴	范围	描述	视觉效果
FILL	0-1	控制图标是填充还是描边	0 = 描边，1 = 填充
GRAD（字重）	-25 到 200	调整笔画的“粗细”	较低 = 较细，较高 = 较粗
opsz（光学尺寸）	20-48像素	针对不同的显示尺寸优化设计	较低 = 细节更多（适用于小尺寸），较高 = 针对大尺寸优化
wght（粗细）	100-700	控制图标的整体粗细	100 = 细，400 = 常规，700 = 粗

这些轴可以组合起来，从单个字体文件中创建数千种变体。例如，一个填充的、粗体的、大尺寸的图标将使用 FILL、wght 和 opsz 的较高值。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:5-50
• variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf:3-10
• variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf:5-20

可用字体文件

Material Design Icons 存储库提供多种格式和样式变体的可变字体。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-3
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:1-3
• variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf:1-3
• variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf:1-3

可变字体插值如何工作

可变字体通过在定义的母版设计（极端值）之间进行插值来工作。当您为每个轴选择值时，字体引擎将通过在母版之间进行插值来计算适当的字形形状。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:10-50
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:20-40

在 CSS 中使用可变字体

通过 CSS 可以最轻松地访问可变字体的强大功能，以用于 Web 项目。您可以使用 font-variation-settings 属性调整四个轴中的任何一个。

CSS 属性	示例	描述
font-variation-settings	'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24	一次控制所有轴
font-weight	font-weight: 500;	可用于 wght 轴（100-700）

CSS 示例

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-20
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:1-10

可变字体技术的优势

在 Material Symbols 中实现可变字体技术提供了几个显著的优势：

1. 减小文件大小：无需为不同样式提供多个字体文件，单个可变字体文件即可生成数千种变体，大大减小了所需的文件总大小。

2. 设计灵活性：设计人员和开发人员可以精确调整图标的外观，以匹配其设计系统并实现视觉一致性。

3. 动画潜力：可变字体轴的连续性允许在不同状态之间进行平滑动画（例如，从填充到描边）。

4. 性能改进：更少的 HTTP 请求和更小的文件大小可带来更好的性能，尤其是在移动设备或连接缓慢的情况下。

5. 未来兼容性：可变字体代表了字体技术的现代发展方向，确保与未来的平台和浏览器兼容。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-10
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:1-10
• variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf:1-10
• variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf:1-10

技术实现细节

Material Symbols 的可变字体实现使用了引入了可变字体支持的 OpenType 1.8 规范。每个字体文件都包含以下关键表：

表名	目的
fvar	定义变体轴（FILL、GRAD、opsz、wght）及其范围。
gvar	包含 delta 值，这些值定义了字形中的每个点在设计空间中不同位置的移动方式。
avar	允许对设计空间进行非线性重新映射。
STAT	样式属性表，描述设计空间。
GSUB	字形替换表，允许基于上下文使用不同的字形。
HVAR	水平度量变体表，控制度量如何变化。

此实现确保图标在整个设计空间中保持良好的视觉质量，同时最大限度地减小文件大小。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-10
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:1-15

限制和注意事项

在使用 Material Symbols 可变字体时，请注意以下几点：

1. 浏览器支持：虽然现代浏览器支持可变字体，但旧版浏览器可能需要回退方案。

2. 性能影响：过多的动画或对可变字体轴的调整可能会影响低端设备的性能。

3. 渲染差异：可变字体在不同平台和浏览器上的渲染可能略有不同。

4. Web 的 WOFF2 格式：对于 Web 项目，请务必使用 WOFF2 格式以利用其压缩优势。

5. 轴范围限制：请保持在每个轴定义的范围内，以确保正确渲染。

来源

• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:1-5
• variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2:1-5

结论

可变字体技术代表了 Material Design Icons 系统的重大进步。通过实现这项技术，Material Symbols 提供了前所未有的灵活性、减小的文件大小和改进的性能。四个设计轴（FILL、GRAD、opsz、wght）提供了一个全面的设计空间，允许精确自定义图标以满足特定的设计要求。

有关 Material Symbols 不同样式变体的信息，请参阅 样式变体。有关在项目中使用 Material Symbols 的实现细节，请参阅 使用 Material Symbols。