在使用material design的描边图标（material icons outlined）时，开发者有时会遇到一个需求，即希望调整这些图标的描边宽度，使其看起来更细或更粗。然而，尝试通过常见的css属性，例如font-weight或stroke-width，往往无法达到预期效果。本文将深入探讨这一现象的原因，并提供正确的解决方案。
为什么font-weight和stroke-width无效？
Material Icons，包括其描边版本（Outlined），本质上是字体文件中的字形（glyphs）。当你在HTML中使用<i class="material-icons-outlined">assignment</i>这样的标签时，浏览器实际上是将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字体：
<!DOCTYPE html>
<html>
<head>
<title>Material Icons Outlined 宽度调整</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
<style>
body {
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 40px;
}
h2 {
color: #333;
}
/* 默认尺寸的描边图标 */
.material-icons-outlined--default {
font-family: 'Material Icons Outlined';
font-size: 48px; /* 默认尺寸 */
color: #3f51b5;
border: 1px solid #eee;
padding: 10px;
border-radius: 5px;
}
/* 较小尺寸的描边图标，视觉上描边更细 */
.material-icons-outlined--small {
font-family: 'Material Icons Outlined';
font-size: 24px; /* 减小尺寸 */
color: #009688;
border: 1px solid #eee;
padding: 10px;
border-radius: 5px;
}
/* 较大尺寸的描边图标，视觉上描边更粗 */
.material-icons-outlined--large {
font-family: 'Material Icons Outlined';
font-size: 72px; /* 增大尺寸 */
color: #e91e63;
border: 1px solid #eee;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<section>
<h2>Material Icons Outlined 宽度调整示例</h2>
<p>通过调整 `font-size` 属性来观察描边图标的视觉变化。</p>
<div style="display: flex; gap: 30px; align-items: flex-end;">
<div style="text-align: center;">
<i class="material-icons-outlined material-icons-outlined--large">assignment</i>
<p>Large (72px)</p>
</div>
<div style="text-align: center;">
<i class="material-icons-outlined material-icons-outlined--default">assignment</i>
<p>Default (48px)</p>
</div>
<div style="text-align: center;">
<i class="material-icons-outlined material-icons-outlined--small">assignment</i>
<p>Small (24px)</p>
</div>
</div>
</section>
</body>
</html>在上面的代码中，我们定义了三个不同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值。
