【图标字体】Material Symbols的基础知识和使用示例

介绍

大家”材料符号你知道吗

材料符号是谷歌官方提供的图标字体之一。
（截至 2022 年，谷歌将材料符号什么时候材质图标我们提供两种图标字体)

在本文中材料符号本节介绍 .

什么是物质符号？

Material Symbols 是谷歌官方提供的最新图标字体。
此外，超过 2,500 个图标被集成到一个字体文件中。

【アイコンフォント】Material Symbolsの基本と使用例
材质符号有三种样式：Outlined、Rounded 和 sharp。
您可以在这 3 种样式中调整 4 个可变轴 Fill、Weight、Grade、Optical size。

三种图标样式的特点如下。

风格	特征
概述	这是一种常见的图标形状。
圆形	与轮廓相比，角是圆角的。
锋利的	与轮廓相比，圆角被消除。

还有，四个变量轴的取值和作用如下。

可变轴	价值	角色
充满	0, 1	在未填充和已填充状态之间切换。
重量	100 至 700	定义图标的线条粗细。
年级	-25, 0, 200	`Dark Mode` 和 `Light Mode` 将改变图标的粗细以给出相同的印象。
光学尺寸	20 至 48	即使图标的大小发生变化，粗细也会发生变化，以使图标具有相同的印象。

如何使用材料符号

赶快材料符号我将解释如何使用 .

① 使用样式表加载 Material Symbols

首先，加载您要显示的图标样式所需的样式表。
在 HTML 文件的 head 标记中添加以下代码。
通过加载这些样式表，您可以使用所有材料符号！

<!--Outlinedを読み込む場合-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<!--Roundedを読み込む場合-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<!--Sharpを読み込む場合は-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

仅加载必要的样式/变量轴

但是，使用上面的代码读取会读取所有变量轴，因此您将读取一个图标样式的大约 2MB 的字体文件。

因此，如果您只想加载您需要的样式和可变轴，您可以通过自定义 URL 仅加载您需要的内容。

决定图标样式时
http://...?family=Material+Symbols+〇〇...

↑ 在这部分 URL 参数中
Outlined 或 Rounded 或 Sharp
您可以通过填写来决定图标的样式。

决定可变轴时
http://... :opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200

在这部分URL参数↑中指定＠之后所需的变量轴值。

例如
- 光学尺寸：24
- 重量：500
- 等级：-25 ~ 0
- 填充：0 ~ 1`

如果您指定↓，它将是这样的。
http://... :opsz,wght,FILL,GRAD@24,500,0..1,-25..0

② 使用材料符号

1. 用 HTML 编写

首先，我将解释如何通过直接在 HTML 中编写代码来显示 Material Symbols。

在 HTML 中显示材料符号的 HTML 代码是
当您在官方网站上选择要使用的图标时会显示它。
【アイコンフォント】Material Symbolsの基本と使用例

代码内容如下，图标样式在类名中指定，图标类型在标签内容中指定。

<span class="material-symbols-outlined"> schedule </span>

2.改变变量轴

要更改变量轴，您需要在 CSS 中使用 font-variation-settings 指定它。

例如，您可以通过像这样写↓来更改所有可变轴。

.material-symbols {
  font-variation-settings:
  'FILL' 1,
  'wght' 600,
  'GRAD' -25,
  'opsz' 24
}

此外，通过这样做，您可以更改一个变量轴。

/* Fillのアイコンに変更する */
.symbols-fill {
  font-variation-settings: 'FILL' 1
}

/* Fillのアイコンに変更する */
.symbols-weight600 {
  font-variation-settings: 'wght' 600
}

应用

为了掌握Material Symbols，我觉得很难直接使用，所以我创建了一个这样的Material Symbols组件。

MaterialSymbols.tsx

import { css } from '@emotion/core'
import React, { ReactNode } from 'react'

interface Props {
  children: ReactNode
  type?: 'outline' | 'rounded' | 'sharp'
  fill?: boolean
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700
  grade?: -25 | 0 | 200
  opticalSize?: 20 | 24 | 40 | 48
}

export const MaterialSymbol = ({
  children,
  type = 'outline',
  fill = false,
  weight = 400,
  grade = 0,
  opticalSize = 24,
}: Props) => {
  return (
    <span
      css={symbolStyle(fill, weight, grade, opticalSize)}
      className={`material-symbols-${type}`}
    >
      {children}
    </span>
  )
}

const symbolStyle = (fill: boolean, weight: number, grade: number, opticalSize: number) =>
  css({
    display: 'inline-block',
    flexShrink: 0,
    fontVariationSettings:
      `'FILL' ${fill ? 1 : 0},
      'wght' ${weight},
      'GRAD' ${grade},
      'opsz' ${opticalSize}`,
    height: opticalSize,
    overflow: 'hidden',
    width: opticalSize,
  })

概括

由于 Material Symbols 有很多种，我认为最好使用某种程度的绑定来创建具有统一感的 UI。

例如，

图标样式仅为轮廓，
FILL 使用 0 和 1，
重量只有400，
暗模式和亮模式的 Grad 为 -25 和 0
光学尺寸为 24

我们建议您减少使用的图标数量。

感谢您阅读到最后！
如果你想听更多的细节，让我们直接在 Dev Talk 中交谈！

我们也在推特上发送信息，所以如果你喜欢，请关注我们！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308627984.html