优秀的编程知识分享平台

网站首页 > 技术文章 正文

Google推出的首款动态图标字体 如何在设计和开发中使用?

nanyue 2024-10-30 02:57:44 技术文章 3 ℃

Anicons 是 Google Design 和 Typogram 合作推出的全球第一款彩色图标字体，它是目前最先进的两种字体技术 -- 可变字体和彩色字体的结合的首次实践。


Anicons 字体自带时间轴，包含了位移、颜色变换、缩放等效果，可以安装在电脑上在设计时使用，也可以嵌入 HTML 网页中，通过简单的 CSS 就能定义动画。本文将介绍 Anicons 字体在设计时（以 Adobe XD 为例）和在 HTML 中如何使用，非专业的那种。

下载和安装

通过 Anicons 字体的官网可以下载到 Anicons 字体包。

下载并解压之后你会得到多个文件夹，其中“Anicons_static”文件夹中的 6 个字体用于在本地电脑安装，直接多选安装即可。“Anicons_variable”文件夹中是可变字体用于在 HTML 中使用，“Anicons_webfont_kit”文件夹中则是在 HTML 中使用的包含 CSS 的套件。

在设计中使用

以在 Adobe XD 中使用为例，安装完“Anicons_static”文件夹中的 6 个字体后，你可在 Adobe XD 的属性检查器的“文本”中的字体列表中找到“Anicons Static”和“Anicons Color Static”。

其中“Anicons Static”是常规字体，选择之后有两个字重分别是“Start”和“End”，而彩色字体“Anicons Color Static”则有 4 个字重，多了“Layer 0”和“Layer 1”。“Start”和“End”其实分别是该字体开始和结束时的状态，“Layer”是图层，因为有颜色的字体不同颜色的元素是放在不同的图层上，2 种颜色就有了 2 个图层。

使用图标字体，我们不可能直接输入图标，需要使用其它字符来代替，Anicons 字体是输入大小写英文字母、数字、符号，比如在文本框中输入“a”，选择 Anicons 字体实际显示的是汉堡菜单图标，输入“h”是三角形图标，输入“i”是播放按钮图标，输入“u”是点赞图标。

当然，小编也为大家贴心的准备了全部字符和不同字体所对应的图标，下面是全部图标和字符的对照表（点击查看大图）。

在 HTML 中使用

你可以选择将字体托管在自己的服务器上，想要直接尝试可以直接引用官方的 CSS，常规字体使用以下代码：

<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons-regular.css" rel="stylesheet">

彩色字体使用以下代码：

<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons-color.css" rel="stylesheet">

同时使用常规字体和彩色字体使用以下代码：

<link href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons.css" rel="stylesheet">

然后在 HTML 中使用图标字符即可，字符表可参考文中上方的字符表，比如“A”为汉堡菜单图标：

<div class="icon">A</div>

接下来你需要指定字体：

font-family: "Anicons Regular", sans-serif;
font-family: "Anicons Color", sans-serif;

然后可以加 CSS 和鼠标经过效果：

.icon {
  font-variation-settings: "TIME" 1;
  transition: font-variation-settings 0.4s ease;
}
.icon:hover{
  font-variation-settings: "TIME" 100;
}

现在，你已经可以拥有鼠标经过的效果：

其中 font-variation-settings 用来设置字体的变化规律，下图是“A”汉堡菜单图标的"TIME"的值分别为 1、10、20、······ 90、100 的状态（从左往右从上往下排序）：

你也可以使用 @keyframes 动画定义动画，CSS 的 @keyframes 和 animation 可自行了解：

@keyframes icon-animation {
    0% { font-variation-settings: "TIME" 1; }
  100% { font-variation-settings: "TIME" 100; }
}
.icon {
  animation: icon-animation .5s ease-in-out infinite;
}

如果你需要将字体托管在自己的服务器上，可以直接拷贝前面下载解压后的“Anicons_webfont_kit”，我的目录是这样的：

index.html 的代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Anicons</title>
	<link href="./webfont/anicons.css">
  <style>
    .icon{
      font-family: "Anicons Regular", sans-serif;
      font-family: "Anicons Color", sans-serif;
    }
		.icon {
      font-variation-settings: "TIME" 1;
      transition: font-variation-settings 0.4s ease;
      display: inline-block;
      width: 100px;
      line-height: 100px;
      height: 100px;
      text-align: center;
      font-size: 60px;
      cursor: pointer;
    }
		.icon:hover {
      font-variation-settings: "TIME" 100;
    }
	</style>
	</head>
	<body>
    <div class="icon">A</div>
	</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表