理解 Material Icons Outlined 的特性
material icons 是 google 提供的一套广泛使用的图标库，它们以字体文件的形式提供，允许开发者通过css轻松地在网页中集成各种图标。其中，material icons outlined 是一种特定的风格，其图标以清晰的描边轮廓呈现。由于它们本质上是字体字形（glyphs），而不是可独立操作的图形元素（如svg路径），因此其外观特性受到字体渲染机制的限制。
为何传统CSS属性无法直接控制描边粗细？
在尝试调整 Material Icons Outlined 图标的描边粗细时，开发者常会尝试使用 font-weight 或 stroke-width 等CSS属性。然而，这些尝试通常无效，原因如下：
- font-weight 的局限性： font-weight 属性用于控制文本字体的粗细，它依赖于字体文件中是否包含不同粗细的字形变体。对于 Material Icons Outlined 这种专门设计的图标字体，其“描边”是字形本身固有的设计特征，而非通过 font-weight 动态生成的。该字体通常只提供一个固定的“粗细”版本，因此调整 font-weight 不会改变描边的视觉粗细。
- stroke-width 的不适用性： stroke-width 属性通常用于SVG图形元素，用于控制路径的描边宽度。由于 Material Icons Outlined 是作为文本字符渲染的，它们不具备SVG路径的特性，因此 stroke-width 属性对其无效。
描边是 Material Icons Outlined 字形设计中不可分割的一部分，其相对粗细是固定的。
解决方案：通过 font-size 调整描边粗细
鉴于上述限制，唯一能有效改变 Material Icons Outlined 图标描边视觉粗细的方法是调整其 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: 30px;
}
h2 {
margin-bottom: 5px;
}
/* 默认大小的描边图标 */
.material-icons-outlined--default {
font-family: 'Material Icons Outlined';
font-size: 60px; /* 默认较大尺寸 */
color: #333;
}
/* 减小 font-size 以使描边视觉上变细 */
.material-icons-outlined--thinner {
font-family: 'Material Icons Outlined';
font-size: 30px; /* 减小尺寸，描边视觉上变细 */
color: #007bff;
}
/* 进一步减小 font-size */
.material-icons-outlined--even-thinner {
font-family: 'Material Icons Outlined';
font-size: 20px; /* 进一步减小尺寸 */
color: #28a745;
}
</style>
</head>
<body>
<section>
<h2>默认描边 (font-size: 60px)</h2>
<i class="material-icons material-icons-outlined--default">assignment</i>
</section>
<section>
<h2>较细描边 (font-size: 30px)</h2>
<i class="material-icons material-icons-outlined--thinner">assignment</i>
</section>
<section>
<h2>更细描边 (font-size: 20px)</h2>
<i class="material-icons material-icons-outlined--even-thinner">assignment</i>
</section>
</body>
</html>在上面的示例中，通过为不同的 <i> 元素应用不同的 font-size，我们可以观察到图标描边视觉上的变化。font-size 越小，图标及其描边就越细。
注意事项与替代方案
- 全局缩放： 调整 font-size 会导致整个图标（包括其内部形状和描边）按比例缩放。如果你只想改变描边粗细而不影响图标的整体大小，那么 Material Icons Outlined 可能不是最佳选择。
- 清晰度： 将 font-size 设置得过小可能会导致图标细节丢失或描边变得模糊不清，影响视觉效果。
- 替代方案：SVG 图标： 如果你需要对图标的描边粗细有更精细、独立的控制，或者需要更灵活的样式定制，那么使用SVG格式的图标是更好的选择。SVG是矢量图形，可以通过CSS直接控制其 stroke-width、fill 等属性，实现高度定制化。你可以下载 Material Design Icons 的SVG版本，或使用其他SVG图标库。
总结
尽管 font-weight 和 stroke-width 等CSS属性无法直接调整 Material Icons Outlined 图标的描边粗细，但通过巧妙地利用 font-size 属性，我们可以间接实现描边视觉上的“变细”效果。理解图标字体的渲染机制是解决此类问题的关键。对于需要更高级描边控制的场景，建议考虑使用SVG图标以获得更大的灵活性。
