恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Google推出的首款动态图标字体 如何在设计和开发中使用?
0.0°
2020-03-12 原创文章 教程 举报 2351 6 3 0

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

1

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”是点赞图标。

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

如果要在设计中使用彩色图标字体,则需要使用多个图层,分别选择不同的字重设置不同的颜色,最后叠放到一起达到显示效果。当然,你也可以安装“Anicons_variable”文件夹中的字体,直接使用,但是只要一个状态。

在 HTML 中使用

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

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

彩色字体使用以下代码:

同时使用常规字体和彩色字体使用以下代码:
href="https://res.cloudinary.com/dr6lvwubh/raw/upload/v1581441981/Anicons/anicons.css" rel="stylesheet">
然后在 HTML 中使用图标字符即可,字符表可参考文中上方的字符表,比如“A”为汉堡菜单图标:
A
接下来你需要指定字体:
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 的代码如下:

<html>
<head>
  <meta charset="UTF-8">
  <title>Aniconstitle>
    <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">Adiv>
    body>
html>


Powered by Froala Editor

更新:2020-03-12

收藏

6人已收藏

文家齐

不是别人不够风度,而是你不够大度。

  • 3

    作品

  • 1

    粉丝

  • 0

    关注

  • 使用Merge export将Adobe XD所有画板合并导
  • Adobe XD源文件快速预览QuickLook插件

    猜你喜欢

      2020-03-12 原创文章 教程 举报 2351 6 3 0

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

      0.0°

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

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年03月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      6
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录