调整 Material Icons Outlined 轮廓粗细的技巧-html教程-PHP中文网

调整 Material Icons Outlined 轮廓粗细的技巧

聖光之護

发布： 2025-09-07 15:15:02

原创

675人浏览过

调整 material icons outlined 轮廓粗细的技巧

本文旨在提供调整 Material Icons Outlined 轮廓粗细的实用方法。由于 Material Icons Outlined 本身是矢量图形，直接修改 font-weight 和 stroke-width 属性通常无效。本文将探讨通过调整字体大小来间接控制轮廓视觉效果，并提供代码示例进行演示。理解这种限制对于有效使用 Material Icons Outlined 至关重要。

Material Icons Outlined 是一组常用的图标字体，以其简洁的轮廓风格而著称。然而，在实际应用中，开发者可能会遇到需要调整图标轮廓粗细的需求。直接修改 CSS 中的 font-weight 或 stroke-width 属性通常无法达到预期效果，这是因为 Material Icons Outlined 本质上是矢量图形，其轮廓由预先定义的路径构成。

解决方案：调整字体大小

虽然不能直接修改轮廓粗细，但可以通过调整字体大小来间接影响图标的视觉效果。减小字体大小会使轮廓看起来相对更细，反之则更粗。

以下是一个示例，展示了如何通过调整 font-size 来改变 Material Icons Outlined 的视觉粗细：

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

查看详情

<html>

<head>
  <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>
    .material-icons-outlined,
    .material-icons.material-icons--outlined {
      font-family: 'Material Icons Outlined';
    }

    .icon-small {
      font-size: 30px; /* 较细的轮廓 */
    }

    .icon-large {
      font-size: 60px; /* 较粗的轮廓 */
    }
  </style>
</head>

<body>

  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons material-icons--outlined icon-small">assignment</i>
    <i class="material-icons material-icons--outlined icon-large">assignment</i>
  </section>

</body>

</html>

登录后复制

在这个例子中，我们定义了两个 CSS 类 icon-small 和 icon-large，分别设置了较小和较大的 font-size。通过将这些类应用到 Material Icons Outlined，可以观察到轮廓视觉粗细的变化。

注意事项：

调整 font-size 会同时影响图标的大小和轮廓粗细。因此，需要根据具体的设计需求进行权衡。
如果需要更精细的控制，可以考虑使用 SVG 图标代替 Material Icons Outlined。SVG 图标允许直接修改路径的 stroke-width 属性，从而实现对轮廓粗细的精确控制。
部分 Material Icons 提供了填充和轮廓两种版本。根据实际需求，可以选择使用填充版本，并通过调整颜色来达到视觉上的粗细变化效果。

总结：

虽然 Material Icons Outlined 本身不支持直接修改轮廓粗细，但通过调整 font-size 可以间接实现类似的效果。在选择使用 Material Icons Outlined 时，需要充分理解其限制，并根据实际情况选择最合适的解决方案。如果需要更精细的控制，可以考虑使用 SVG 图标或选择其他图标库。

以上就是调整 Material Icons Outlined 轮廓粗细的技巧的详细内容，更多请关注php中文网其它相关文章！