Material 符号指南

html5 文章 2024-04-23 21:43 215 0 全屏看文

AI助手支持GPT4.0

什么是 Material Symbol?

Material Symbols 是我们最新的图标,将 2,500 多个字形整合到一个具有各种设计变体的字体文件中。符号提供三种样式和四个可调整的可变字体轴(填充、粗细、坡度和光学尺寸)。请参阅 Material Symbols 库中的全套 Material 符号。

FILL 轴

Fill 可让您修改默认的图标样式。单个图标可以同时呈现广告空缺和填充状态。

如需传达状态转换,请使用填充轴进行动画或互动。默认值为 0(默认值),值为 1(完全填充)。除了粗细轴外,填充也会影响图标的外观。

wght 轴

Weight 用于定义符号的笔触粗细,粗细范围介于窄字体 (100) 和粗体 (700) 之间。权重也会影响符号的总体大小。

GRAD 轴

坡度轴可视化

重量和等级会影响符号的粗细。对等级的调整比对权重的调整更为精细,并且对符号的尺寸影响较小。

对于某些文本字体,您还可以使用成绩。您可以匹配文本和符号的层级,以实现和谐的视觉效果。例如,如果文本字体的等级值为 -25,符号可以将其与合适的值(例如 -25)匹配。

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

低强调度(例如 -25 等级):如需减少深色背景上浅色符号的眩光,请使用低等级。

高强调度(例如 200 等级):如需突出显示某个符号,请增加正等级。

opsz 轴

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

为了让图片在不同尺寸下看起来相同,描边粗细(粗细)会随着图标大小的缩放而发生变化。光学尺寸提供了一种方式,可在您增大或缩小符号尺寸时自动调整描边粗细。

获取 Material 符号

Material Symbol 有多种格式,适用于不同类型的项目和平台,既适合应用开发者,也适合设计模型或原型的设计人员。

许可

Material Symbols 按 Apache 许可版本 2.0 提供。

浏览和下载单个图标

您可以从 Material Symbols 库获得 SVG 或 PNG 格式的一整套 Material 符号。它们适用于 Web、Android 和 iOS,或与任何设计工具搭配使用。

Git 代码库

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

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

使用 Material Symbol

在 Web 中使用

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

系统会将这些图标打包为一种字体,以便 Web 开发者只需几行代码即可轻松整合这些图标。

使用 Google Fonts 的静态字体

如需设置在任何网页中使用的图标字体,最简单的方法是使用 Google Fonts。添加下面一行 HTML 代码:

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

上面的代码段包含每个的默认配置,权重为 400,光学尺寸为 48,等级为 0,填充为 0。

使用 Fonts CSS API 配置不同的轴值。请参考以下示例:

 

Google Fonts 的可变字体

如果您要通过 CSS 为图标添加动画效果,或者想要更精细地控制图标功能,请使用 Google Symbols 可变字体。使用范围(采用 number..number 格式)时,我们可以加载整个可变字体。请查看 Can I Use 的变量字体支持,了解您的用户能否加载可变字体(最有可能)。下面是一些示例:


甚至还能为它们添加动画效果!


自行托管字体

图标字体托管在您控制的位置,以决定何时更新资源。例如,如果网址为 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 来表示图标,而不是 &#xE5C8;。对于其他图标,请使用图标名称的蛇形命名法(即用下划线替换空格)。

桌面设备和移动设备上的大多数现代浏览器都支持此功能。请参阅“Can I Uses 连字支持”,了解您的用户是否能够处理连字(最有可能)。

如果您确实需要支持不支持连词的浏览器,请使用数字字符引用(也称为代码点)指定图标,如下例所示:


选择任意图标并打开图标字体面板,即可找到 Material Symbols 库中的图标名称和代码点。每种图标字体在 Google Fonts git 代码库中都有一个代码点索引,用于显示完整的名称和字符代码。

在 Material Design 中设置图标样式

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


在 Android 中使用

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

在 iOS 中使用

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

在 Flutter 中使用

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


-EOF-

AI助手支持GPT4.0