在使用material design的描边图标（material icons outlined）时，开发者有时会遇到一个需求，即希望调整这些图标的描边宽度，使其看起来更细或更粗。然而，尝试通过常见的css属性，例如font-weight或stroke-width，往往无法达到预期效果。本文将深入探讨这一现象的原因，并提供正确的解决方案。
为什么font-weight和stroke-width无效？
Material Icons，包括其描边版本（Outlined），本质上是字体文件中的字形（glyphs）。当你在HTML中使用assignment这样的标签时，浏览器实际上是将assignment这个文本渲染成一个特定的字体字符，而这个字符的设计就包含了描边样式。
font-weight的限制： font-weight属性主要用于控制文本的粗细（如加粗），它通过选择字体家族中预定义的字重（light, regular, bold等）来工作。对于像Material Icons Outlined这样，其“描边”是字形固有设计一部分的图标字体，font-weight无法单独改变其描边的粗细，因为它没有提供这种粒度的控制。即使你设置了font-weight: 100;，如果字体本身没有提供极细的字重版本，或者其描边样式并非通过字重来控制，那么这个属性将不起作用。
stroke-width的适用范围： stroke-width属性是SVG（可缩放矢量图形）和Canvas等图形元素特有的属性，用于控制路径或形状的描边宽度。它不适用于字体字形。字体字形的渲染方式与SVG路径不同，因此尝试将stroke-width应用于字体图标是无效的。
调整描边图标宽度的有效方法：font-size
由于描边图标的“描边”是其字形设计的一部分，而不是一个独立的CSS描边属性，因此唯一能影响其视觉上粗细的方法是等比例缩放整个图标。实现这一点的CSS属性就是font-size。
当你减小font-size时，图标的整体尺寸会缩小，其描边也会随之等比例缩小，从而在视觉上呈现出“更细”的效果。反之，增大font-size则会使描边显得“更粗”。
示例代码
以下示例展示了如何通过调整font-size来改变Material Icons Outlined图标的视觉宽度：
首先，确保你的HTML文件中引入了Material Icons Outlined字体：
Material Icons Outlined 宽度调整 Material Icons Outlined 宽度调整示例
通过调整 `font-size` 属性来观察描边图标的视觉变化。
assignmentLarge (72px)
assignmentDefault (48px)
assignmentSmall (24px)
在上面的代码中，我们定义了三个不同font-size的Material Icons Outlined图标。你会发现，font-size为24px的图标其描边看起来比48px的图标更细，而72px的图标描边则显得更粗。
注意事项与总结
- 比例缩放： font-size会等比例缩放图标的所有部分，包括描边、内部填充和整体尺寸。这意味着你无法独立地调整描边宽度而不影响图标的整体大小。
- 清晰度考量： 减小font-size虽然能使描边看起来更细，但如果尺寸过小，可能会导致图标细节模糊或难以辨认。在实际应用中，需要根据设计需求和可读性进行权衡。
- 替代方案： 如果你的设计对描边宽度有非常精细且独立于图标尺寸的控制需求，那么Material Icons字体可能不是最佳选择。在这种情况下，可以考虑使用SVG图标。SVG图标允许你直接控制stroke-width属性，提供更高的灵活性。
总结来说，对于Material Icons Outlined图标，忘记font-weight和stroke-width，它们无法直接控制描边宽度。font-size是唯一的CSS属性，可以通过等比例缩放整个图标来影响其描边的视觉粗细。在设计时，请根据图标的整体尺寸和可读性来选择合适的font-size值。
