提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
Anicons是Google和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”是点赞图标。
当然,小编也为大家贴心的准备了全部字符和不同字体所对应的图标,下面是全部图标和字符的对照表(点击查看大图)。
如果要在设计中使用彩色图标字体,则需要使用多个图层,分别选择不同的字重设置不同的颜色,最后叠放到一起达到显示效果。当然,你也可以安装“Anicons_variable”文件夹中的字体,直接使用,但是只要一个状态。
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">
A
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; } .icon:hover{ font-variation-settings: "TIME" 100; }
@keyframes icon-animation {
0% { font-variation-settings: "TIME" 1; }
100% { font-variation-settings: "TIME" 100; }
}
.icon {
animation: icon-animation .5s ease-in-out infinite;
}
<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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册