调整 Material Icons Outlined 轮廓粗细的有效方法-html教程-PHP中文网

调整 Material Icons Outlined 轮廓粗细的有效方法

花韻仙語

发布： 2025-09-07 13:42:01

原创

381人浏览过

调整 material icons outlined 轮廓粗细的有效方法

正如摘要所述，Material Icons Outlined 的轮廓粗细不能直接通过 font-weight 和 stroke-width 进行调整。这是因为 Material Icons Outlined 实际上是矢量图形，其轮廓是预先定义的。因此，改变字体大小是调整轮廓粗细的间接但有效的方法。

调整字体大小

调整字体大小是控制 Material Icons Outlined 轮廓粗细的最简单直接的方法。通过减小 font-size，可以使图标整体变小，从而使得轮廓看起来更细。

示例代码：

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
  font-size: 30px; /* 调整字体大小 */
}

登录后复制

在上面的代码中，我们将 font-size 从 60px 调整为 30px。这将使图标的整体尺寸减小，从而使轮廓看起来更细。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

HTML 示例：

<!DOCTYPE html>
<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';
      font-size: 30px; /* 调整字体大小 */
    }
  </style>
</head>
<body>

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

</body>
</html>

登录后复制

注意事项

比例关系： 减小 font-size 会等比例缩小整个图标，包括轮廓的粗细。因此，需要根据实际情况调整字体大小，以达到最佳的视觉效果。
与其他元素的关系： 在调整字体大小时，需要考虑图标与其他元素之间的关系。如果图标需要与文字或其他元素对齐，则需要相应地调整其他元素的样式，以保持整体的协调性。
替代方案： 如果需要更精细地控制轮廓的粗细，可以考虑使用 SVG 图标，并自定义 SVG 的 stroke-width 属性。但这需要更多的开发工作量。