字体图标浅析——什么是字体图标?如何生成?怎么使用?

目录

    • 什么是字体图标?
    • 字体图标
      • 字体-Font
        • 字体的工作原理
      • 字体图标的原理
      • 字体图标的优缺点
    • 怎么生成字体图标
      • 第一步:其他图片转为 svg 格式图片
      • 第二步:svg 图片生成为字体图标
        • IcoMoon 使用介绍
        • Iconfont-阿里巴巴矢量图标库
    • 字体图标怎么用
      • 字体的 CSS 代码的说明
      • 字体图标在 HTML 中使用写法解析
      • 添加多个字体文件
    • 结语
    • 参考

什么是字体图标?

说起字体图标,那就不得不提及 Font Awesome 了。相信大家都用过 Font Awesome 吧!只要我们在项目中引入 Font Awesome,通过给元素标签设置对应的class,就可以在页面上显示出图片来。是不是很神奇很方便呢!

要想了解 Font Awesome 为什么能做到这样的效果,我们就需要去了解字体图标。实际上,Font Awesome 就是一个字体图标库。

字体图标

在讲字体图标前,我们要先看一下字体-Font

字体-Font

说到字体,我们优先想到的场景可能是在编写 word 文档时,通过设定不同的字体来让一个文字拥有不一样的“外观”。如下:

在这里插入图片描述

改变字体,就可以改变文字的外观。这是大家公认的。

那字体是如何让文字表现出不同的“外观”的呢?这就需要进一步了解字体的工作原理了。

字体的工作原理

如果对《计算机原理》所了解,那你应该知道:在计算机中,所有的数据都是以二进制代码的形式表示。所以,文字在计算机中实际上是一串二进制的编码

非常粗浅的概况计算机显示文字的流程:

当计算机要显示文字时,就会拿着文字的编码字体(font)中查找对应的字形(glyph),然后在屏幕中输出查找出来的字形(glyph)

通过对计算机文字显示流程的了解,我们可以推测出:字体实际是一个“编码-字形(glyph)”映射表。

所以,只要我们为文字编码设计不同的**字形(glyph)**就可以让文字表现出来不同的外观了。

字体图标的原理

Font Awesome 官网对自己有这样一段描述:

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Font Awesome 通过这段话明确指出了自己本身也是一种字体(font)。

其实字体图标是一种特殊字体

前面我们已经明确了:字体是一个“编码-字形(glyph)”映射表,字形(glyph)是单个字符的外观形态。如果我们把**字形(glyph)**设计成想要图标。那么我们就可以像使用文字一样使用图标了。

字体图标的本质:字体图标是一种特殊的字体,这种字体是一个“编码-图标字形(glyph)”的映射表

字体图标的优缺点

优点:

  • 借助字体图标,我们可以如同操作文字一样操作字体图标。如,颜色的切换、大小的改变。
  • 可以将多个图标整合到一个字体文件中,从而减少网页的请求次数。字体图标是“雪碧图”的良好替代品。相较于“雪碧图”,字体图标的使用更加方便、简单、快捷。
  • 对字体图标进行放大不会出现失真、缩小不会浪费掉像素点

缺点:

  • 由于字体图标本质上就是文字,所以字体图标不能像图片那样有着丰富多彩的颜色,它只能是单色或者渐变色。

  • 字体图标不能像图片一样预览,只能在页面上渲染出来后才能看到具体的形状。

怎么生成字体图标

图片生成字体图标,只支持 svg 格式的图片。如果原图的格式不是svg,需要先将图片转为svg格式。

第一步:其他图片转为 svg 格式图片

将其他格式的图片转为 svg 图片的方法在有网上有许多网站提供这个功能。如

  • https://www.vectorizer.io/uploads/
  • https://www.jinaconvert.com/cn/convert-to-svg.php

此外,我们还可以借助 ps 实现格式的转换。

第二步:svg 图片生成为字体图标

这里推荐两个网站

  • IcoMoon
  • Iconfont-阿里巴巴矢量图标库

IcoMoon 使用介绍

IcoMoon 是一个外国网站,可能速度有点慢,不过IcoMoon 有个好处就是不用注册也可以直接使用。

  1. 首先,进入 IcoMoon 首页,点击右上角的紫色按钮“IcoMoon App”,进入“项目管理”页面
    在这里插入图片描述

  2. 点击左上角的菜单按钮,选择“New Empty Set”,新建一个新的图标集合

    在这里插入图片描述

  3. 点击新建图标集合(Set)的右上角菜单,选择“Import to Set”,上传你的 svg 图片
    在这里插入图片描述

  4. 点击上传成功的图片进行选中操作,然后点击底部的浮动菜单栏中的“Generate Font”,进入字体图标生成页

    在这里插入图片描述

  5. 在字体图标生成页设置class等(也可以直接使用默认的)

  6. 点击底部的浮动菜单的“Download”按钮,即可生成字体图标并下载到本地。
    在这里插入图片描述

Iconfont-阿里巴巴矢量图标库

Iconfont 是我们国内的网站,是一个社区网站,在上面有许多优质好看的非商用免费图标。要想使用 IconFont,必须要注册一个账号。

步骤如下:

  1. 进入 Iconfont 首页,登录注册。点击右上角的“上传”图标进入上传页面
    在这里插入图片描述

  2. 上传 svg 图片

    在这里插入图片描述

  3. 鼠标浮动到你上传成功的图片,在弹出的菜单中点击”购物车“图标选项

    在这里插入图片描述

  4. 打开右侧的”购物车“抽屉弹窗,点击底部的”下载代码“按钮,即可生成字体图标,并下载成功。

    在这里插入图片描述

字体图标怎么用

现在我们已经拿到了字体图标源码,接下来就是要在项目使用字体图标了。

字体图标的使用只要四步即可:

  • 将字体添加到项目中
  • 通过 CSS 将字体导入项目,并配置相应的 CSS class,
  • 将 CSS 引用到项目中
  • 通过 class 在 html 中添加字体图标

其实,在下载好的字体图标文件中已经替我们完成了二步,我们只需将主要的文件复制进项目中即可。这里的主要文件主要有两种,字体文件以及css。下面以 Iconfont 导出的字体图标为例:
在这里插入图片描述

我们只需要将iconfont.cssiconfont.ttf复制到项目即可。

注意:尽管我们不需要在项目中添加Iconfont.json文件就可以正常使用字体图标了。但是为了便于以后的维护以及查找,建议一同将iconfont.json复制到项目中。

接下来,我们只需要在 HTML 中引入iconfont.css就可以使用这个字体里面的字体图标了。

字体的 CSS 代码的说明

一般的,我们不需要对字体的 CSS 代码做任何改动。或者应该说,最好不要做改动。因为如果改动不对,就会造成字体图标的失效。但是了解里面的配置,以及哪些东西可以改动,也是很有必要的。

下面,我们以iconfont.css 为例。看看里面到底长什么样子。

/*
 * 通过 @font-face 指定字体,也就是注册字体
 */
@font-face {
  font-family: "iconfont"; /* 设置字体名 */
  
  /* 
   * 字体文件的位置,如果你的字体文件和CSS相对位置发生改变,应该同步修正,format 用于指定字体文件的格式
   * src 可添加多个字体文件,这是为了保证兼容性。CSS 解析是从上往下解析的,如果前面的字体文件不被浏览器
   * 支持,就会往下解析另一个字体文件,直至找到可用的字体文件。
   * 写法如下:
   * src: url('iconfont.eot?#iefix') format('embedded-opentype'),
   *      url('iconfont.woff') format('woff'),
   *      url('iconfont.ttf') format('truetype'),
   *      url('iconfont.svg#defineName') format('svg');
   */
  src: url('iconfont.ttf?t=1627688108463') format('truetype'); 
}

/*
 * 字体的启用
 * 当标签含有类 iconfont 时,强制使用 iconfont 字体 
 */
.iconfont {
  /*
   * font-family 用于声明使用 iconfont 字体,font-family 的值必须与 @font-face 属性 font-family 的值保持一致。如果对其中一
   * 个改动了另一个也要一并修改。一般的,不建议修改 
   */
  font-family: "iconfont" !important;  
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;  /* 字体锯齿优化属性,详见:https://www.jianshu.com/p/6f022c65775f */
  -moz-osx-font-smoothing: grayscale;
}

/*
 * 字体图标的启用
 * content 用于声明,要使用 iconfont 字体中,编码为 \ef67 的字形glyph(字体图标)。iconfont 字体中的字体图标编码可以再 iconfont.json 中查询。
 * 类名可以改变,不过不建议修改。因为它是与 iconfont.json 的值以及 Iconfont 网站中的图标名保持一致的。修改了将会导致一致性遭到破坏,不
 * 便于维护
 */
.icon-aichong02:before {
  content: "\ef67";
}

通过上面的 CSS 说明,我们有了大致的理解。同时,我们也可以推断出如何在 HTML 中使用字体图标了

字体图标在 HTML 中使用写法解析

<!-- 添加 iconfont 类,表明 当前标签要使用 iconfont 字体 -->
<!-- 添加 icon-aichong02 类,表明当前标签要使用 iconfont 字体的中编号为 \ef67 字形(字体图标)  -->
<span class="iconfont icon-aichong02"></span>

添加多个字体文件

有些时候,我们可能需要在项目中添加多个字体文件。这时候有两种处理方法:

  1. 多套字体分别单独引入

  2. 将每套字体的css合并到一个文件中

    @font-face {
      font-family: "iconfont"; /* 设置字体名 */
      src: url('iconfont.ttf?t=1627688108463') format('truetype'); 
    }
    
    @font-face {
      font-family: "iconfont"; /* Project id  */
      src: url('iconfont2.ttf?t=1627691132980') format('truetype');
    }
    
    .iconfont {
      font-family: "iconfont" !important;  
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;  /* 字体锯齿优化属性,详见:https://www.jianshu.com/p/6f022c65775f */
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-aichong02:before {
      content: "\ef67";
    }
    
    .icon-date:before {
      content: "\e609";
    }
    

注意:尽管可以添加多个字体文件,不过不建议这样做。因为字体文件过多,就会增加静态资源的请求次数。应该将所有的字体图标合并生成为一个字体文件。

结语

以上就是关于字体图标的解析了。其实关于字体的图标的使用方法,在下载的文件中也有案例展示出来的。例如 Iconfont 的 demo_index.html 文件。在浏览器打开后,你就可以看到上面给出了当前字体文件的使用方法。而且还给出了三种使用方法:

  • Unicode
  • Font class
  • Symbol

因为 Font class 方法是目前使用最为广泛的的,且大多数的UI组件框架也是使用这种方法,所以本文就只讲了 Font class 方法。如果对那两种比较感兴趣,可以自行了解。

希望这篇文章能帮助你。其中可能存在错误点,见谅。

在这里插入图片描述

参考

  • 字体
  • 计算机原理
  • 二进制
  • Font Awesome
  • @font-face
  • CSS3 @font-face属性
  • font-smoothing

热门文章

暂无图片
编程学习 ·

Java输出数组的内容

Java输出数组的内容_一万个小时-CSDN博客_java打印数组内容1. 输出内容最常见的方式// List<String>类型的列表List<String> list new ArrayList<String>();list.add("First");list.add("Second");list.add("Third");list.ad…
暂无图片
编程学习 ·

母螳螂的“魅惑之术”

在它们对大蝗虫发起进攻的时候&#xff0c;我认认真真地观察了一次&#xff0c;因为它们突然像触电一样浑身痉挛起来&#xff0c;警觉地面对限前这个大家伙&#xff0c;然后放下自己优雅的身段和祈祷的双手&#xff0c;摆出了一个可怕的姿势。我被眼前的一幕吓到了&#xff0c;…
暂无图片
编程学习 ·

疯狂填词 mad_libs 第9章9.9.2

#win7 python3.7.0 import os,reos.chdir(d:\documents\program_language) file1open(.\疯狂填词_d9z9d2_r.txt) file2open(.\疯狂填词_d9z9d2_w.txt,w) words[ADJECTIVE,NOUN,VERB,NOUN] str1file1.read()#方法1 for word in words :word_replaceinput(fEnter a {word} :)str1…
暂无图片
编程学习 ·

HBASE 高可用

为了保证HBASE是高可用的,所依赖的HDFS和zookeeper也要是高可用的. 通过参数hbase.rootdir指定了连接到Hadoop的地址,mycluster表示为Hadoop的集群. HBASE本身的高可用很简单,只要在一个健康的集群其他节点通过命令 hbase-daemon.sh start master启动一个Hmaster进程,这个Hmast…
暂无图片
编程学习 ·

js事件操作语法

一、事件的绑定语法 语法形式1 事件监听 标签对象.addEventListener(click,function(){}); 语法形式2 on语法绑定 标签对象.onclick function(){} on语法是通过 等于赋值绑定的事件处理函数 , 等于赋值本质上执行的是覆盖赋值,后赋值的数据会覆盖之前存储的数据,也就是on…
暂无图片
编程学习 ·

Photoshop插件--晕影动态--选区--脚本开发--PS插件

文章目录1.插件界面2.关键代码2.1 选区2.2 动态晕影3.作者寄语PS是一款栅格图像编辑软件&#xff0c;具有许多强大的功能&#xff0c;本文演示如何通过脚本实现晕影动态和选区相关功能&#xff0c;展示从互联网收集而来的一个小插件&#xff0c;供大家学习交流&#xff0c;请勿…
暂无图片
编程学习 ·

vs LNK1104 无法打开文件“xxx.obj”

写在前面&#xff1a; 向大家推荐两本新书&#xff0c;《深度学习计算机视觉实战》和《学习OpenCV4&#xff1a;基于Python的算法实战》。 《深度学习计算机视觉实战》讲了计算机视觉理论基础&#xff0c;讲了案例项目&#xff0c;讲了模型部署&#xff0c;这些项目学会之后可以…
暂无图片
编程学习 ·

工业元宇宙的定义与实施路线图

工业元宇宙的定义与实施路线图 李正海 1 工业元宇宙 给大家做一个关于工业元宇宙的定义。对于工业&#xff0c;从设计的角度来讲&#xff0c;现在的设计人员已经做到了普遍的三维设计&#xff0c;但是进入元宇宙时代&#xff0c;就不仅仅只是三维设计了&#xff0c;我们的目…
暂无图片
编程学习 ·

【leectode 2022.1.15】完成一半题目

有 N 位扣友参加了微软与力扣举办了「以扣会友」线下活动。主办方提供了 2*N 道题目&#xff0c;整型数组 questions 中每个数字对应了每道题目所涉及的知识点类型。 若每位扣友选择不同的一题&#xff0c;请返回被选的 N 道题目至少包含多少种知识点类型。 示例 1&#xff1a…
暂无图片
编程学习 ·

js 面试题总结

一、js原型与原型链 1. prototype 每个函数都有一个prototype属性&#xff0c;被称为显示原型 2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 3. constructor 每个prot…
暂无图片
编程学习 ·

java练习代码

打印自定义行数的空心菱形练习代码如下 import java.util.Scanner; public class daYinLengXing{public static void main(String[] args) {System.out.println("请输入行数");Scanner myScanner new Scanner(System.in);int g myScanner.nextInt();int num g%2;//…
暂无图片
编程学习 ·

RocketMQ-什么是死信队列?怎么解决

目录 什么是死信队列 死信队列的特征 死信消息的处理 什么是死信队列 当一条消息初次消费失败&#xff0c;消息队列会自动进行消费重试&#xff1b;达到最大重试次数后&#xff0c;若消费依然失败&#xff0c;则表明消费者在正常情况下无法正确地消费该消息&#xff0c;此时…
暂无图片
编程学习 ·

项目 cg day04

第4章 lua、Canal实现广告缓存 学习目标 Lua介绍 Lua语法 输出、变量定义、数据类型、流程控制(if..)、循环操作、函数、表(数组)、模块OpenResty介绍(理解配置) 封装了Nginx&#xff0c;并且提供了Lua扩展&#xff0c;大大提升了Nginx对并发处理的能&#xff0c;10K-1000K Lu…
暂无图片
编程学习 ·

输出三角形

#include <stdio.h> int main() { int i,j; for(i0;i<5;i) { for(j0;j<i;j) { printf("*"); } printf("\n"); } }
暂无图片
编程学习 ·

stm32的BOOTLOADER学习1

序言 最近计划学习stm32的BOOTLOADER学习,把学习过程记录下来 因为现在网上STM32C8T6还是比较贵的,根据我的需求flash空间小一些也可以,所以我决定使用stm32c6t6.这个芯片的空间是32kb的。 #熟悉芯片内部的空间地址 1、flash ROM&#xff1a; 大小32KB&#xff0c;范围&#xf…
暂无图片
编程学习 ·

通过awk和shell来限制IP多次访问之学不会你打死我

学不会你打死我 今天我们用shell脚本&#xff0c;awk工具来分析日志来判断是否存在扫描器来进行破解网站密码——限制访问次数过多的IP地址&#xff0c;通过Iptables来进行限制。代码在末尾 首先我们要先查看日志的格式&#xff0c;分析出我们需要筛选的内容&#xff0c;日志…
暂无图片
编程学习 ·

Python - 如何像程序员一样思考

在为计算机编写程序之前&#xff0c;您必须学会如何像程序员一样思考。学习像程序员一样思考对任何学生都很有价值。以下步骤可帮助任何人学习编码并了解计算机科学的价值——即使他们不打算成为计算机科学家。 顾名思义&#xff0c;Python经常被想要学习编程的人用作第一语言…
暂无图片
编程学习 ·

蓝桥杯python-数字三角形

问题描述 虽然我前后用了三种做法&#xff0c;但是我发现只有“优化思路_1”可以通过蓝桥杯官网中的测评&#xff0c;但是如果用c/c的话&#xff0c;每个都通得过&#xff0c;足以可见python的效率之低&#xff08;但耐不住人家好用啊&#xff08;哭笑&#xff09;&#xff09…