此页面由 Cloud Translation API 翻译。

Material 符号指南

什么是 Material Symbols？

Material Symbols 是我们最新的图标，它将 2500 多个字形整合到一个包含各种设计变体的单个字体文件。符号有三种样式和四个可调整的变量字体轴（填充、粗细、等级和光学尺寸）。如需查看完整的 Material 符号，请参阅 Material 符号库。

`FILL` 轴

您可以通过填充功能修改默认图标样式。单个图标同时呈现广告空缺和填充状态

如需传达状态转换，请将填充轴用于动画或互动。值为 0 表示默认，为 1 表示已填满。除了粗细轴之外，填充方式也会影响图标的外观。

`wght` 轴

粗细定义符号的描边粗细，粗细范围介于细（100）和粗体（700）之间。粗细还会影响符号的整体大小。

`GRAD` 轴

成绩轴
可视化

Weight 和 Grade 会影响符号的粗细。调整 Grade 比调整 Weight 更精细，对符号大小的影响较小。

部分文本字体也提供“成绩”。您可以将两个不同级别的年级文字和符号，从而达到和谐的视觉效果。例如，如果文本字体具有 -25 的等级值，符号可以与适当的值（例如 -25）匹配。

您可以根据不同需求使用成绩：

强调度较低（例如 -25 级）：为了减少浅色符号在深色背景上的眩光，请使用较低的级别。

强调度高（例如 200 级别）：如需突出显示符号，请提高正级别。

`opsz` 轴

光学尺寸范围为 20dp 到 48dp。

为了让图片在不同尺寸下看起来一样，描边粗细（厚度）会随着图标尺寸的缩放而变化。光学尺寸提供了一种方式放大或缩小符号大小时，可调整笔画粗细。

获取 Material 符号

Material Symbol 有多种格式，适用于不同的开发各类项目和平台设计人员进行模拟或原型设计。

许可

Material 符号在 Apache License 版本下可用 2.0 ，了解所有最新动态。

浏览和下载各个图标

您可以从 Material Symbols 库下载完整的 Material 符号，格式为 SVG 或 PNG。它们适用于 Web、Android 和 iOS，或可与任何设计工具搭配使用。

Git 代码库

git 代码库包含一整套 SVG 格式的 Material 符号。

$ git clone https://github.com/google/material-design-icons

使用 Material 符号

在 Web 中使用

Material Symbols 字体是整合 Material 符号的最简单方法 Web 项目中。

这些图标会打包成单一字体，以便网站开发者只需几行代码即可整合这些图标。

使用 Google Fonts 的静态字体

设置图标字体的最简单方法是通过 Google 字体。添加以下单行 HTML：

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

以上代码段包含每个轴，以及重量 @ 400，光学尺码 48 岁，成绩在 0 和填充（同样为 0。）

使用字体 CSS API 配置不同的轴值。请查看以下示例：

使用 Google Fonts 的可变字体

如果您要通过 CSS 为图标添加动画效果，或者想要更精细地控制图标功能，请使用 Google Symbols 可变字体。使用格式为 number..number 的范围，我们可以加载整个可变字体。请参阅我可以使用可变字体支持了解您的用户是否能够加载可变字体可能性。下面是一些示例：

甚至以动画形式呈现！

优化图标字体

使用 &icon_names 查询参数对字体进行子集划分，以便仅包含与应用相关的图标，并使用按字母顺序排列的以英文逗号分隔的图标名称（联体）列表。

不建议 - 使用默认设置会加载 3,800 多个图标。字体载荷：295 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
推荐 - 指定图标名称以仅加载必要的图标。字体载荷：1.7 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
对可变字体轴进行实例处理，以便仅包含您的应用的字体轴所需的资源。大多数应用只需要轴的几种变化。

不建议 - 如果缺少轴配置，系统会加载默认的静态字体（粗细 400、光学尺寸 24、圆角 50、等级 0、填充 0）。通常没有必要包含所有可变字体轴，载荷。字体载荷：7.9 MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
推荐 - 使用特定的轴组合。举例来说，完整的“FILL” 提供状态之间的 CSS 转换，而“ROND”选择 100 设计。字体载荷：2.6 KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

自行托管字体

托管图标字体，以便确定何时更新资源。对于例如，如果网址为 https://example.com/material-symbols.woff，则将以下 CSS 规则：

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

为了正确呈现字体，请声明用于呈现图标的 CSS 规则。这些规则通常作为 Google Fonts API 样式表的一部分提供，但在自行托管时，需要手动将其添加到项目中：

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

在 HTML 中使用图标

上面提供的示例使用名为连字，它允许使用图标字形的文本名称渲染。网络浏览器会自动将文本连字符替换为图标矢量，并且提供的代码比等效的数字字符引用更易于阅读。例如，在 HTML 中，您将使用 arrow_forward 来表示图标，而不是 。对于其他图标，请使用图标名称的蛇形命名法 （即，用下划线替换空格）。

桌面设备和移动设备的大多数现代浏览器都支持此功能设备。请参阅 Can I Use 的连字符支持，了解您的用户是否能够处理连字符，他们很可能能够处理。

如果您确实需要支持不支持连字符的浏览器，请使用数字字符引用（也称为代码点）指定图标，如以下示例所示：

在 Material Symbols 上找到图标名称和代码点媒体库方法是选择任意图标并打开图标字体面板。每种图标字体都有一个 Google Fonts git 中的代码点索引代码库会显示完整的名称和字符代码集。

在 Material Design 中设置图标样式

这些图标的设计遵循 Material Design 指南，使用建议的图标大小和颜色时，效果最佳。样式可让您轻松应用建议的尺寸、颜色和活动状态。

在 Android 中使用

在 Material Symbols 库中，所有图标都是矢量可绘制对象格式。如需了解详情，请参阅 Android Vector Asset Studio 文档。

在 iOS 中使用

这些图标还提供 Apple Symbols 格式。如需详细了解这些符号，请参阅 Apple 符号的官方概览和使用指南。

在 Flutter 中使用

我们计划支持 Flutter 的 Material Symbols。敬请关注最新动态。