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

目录

    • 什么是字体图标？
    • 字体图标
      • 字体-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）”的映射表。

字体图标的优缺点

优点：

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

缺点：

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

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

怎么生成字体图标

图片生成字体图标，只支持 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.css和iconfont.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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/38541.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

元宇宙市场爆发，虚拟数字人直播狂飙

元宇宙市场爆发，虚拟数字人直播狂飙

日本虚拟偶像Vox在B站的首场直播1.7小时&#xff0c;直播营收突破111w元。另一位美籍亚裔虚拟主播Shoto两小时直播便获得100w打赏&#xff01;国内虚拟主播许安一单场直播获得了970w的打赏。在大火的元宇宙概念中&#xff0c;虚拟主播以直播方式斩获流量&#xff0c;实现盈利&a…
阅读更多...
「从零入门推荐系统」20：推荐系统的未来发展

「从零入门推荐系统」20：推荐系统的未来发展

作者 | gongyouliu 编辑 | gongyouliu 随着科学技术的进步&#xff0c;信息技术、网络技术及物联网的快速发展&#xff0c;新信息的生产与传播更加便捷、快速。特别是最近大火的chatGPT、大模型技术引领的新一轮科技革命&#xff0c;让每一个人都可以轻松地生产各种各样的内容&…
阅读更多...
【世界读书日】2023年通信好书推荐

【世界读书日】2023年通信好书推荐

今天是世界读书日&#xff08;4月23日&#xff09;。按照老规矩&#xff0c;小编给大家推荐一些通信类的优秀书籍。 过去一年&#xff0c;通信行业的关注热点&#xff0c;主要是&#xff1a;5G-Advanced&#xff08;5.5G&#xff09;、算力网络、东数西算、6G、卫星互联网、智…
阅读更多...
【专题】工业4.0时代：2022年重塑行业未来调查报告PDF合集分享（附原数据表）...

【专题】工业4.0时代：2022年重塑行业未来调查报告PDF合集分享（附原数据表）...

报告链接&#xff1a;http://tecdat.cn/?p32361 这份报告探讨了公司主管们对于新科技的看法&#xff0c;并探讨了他们对于5G、物联网的投资方案&#xff0c;同时也探讨了公司对于提供商和合作生态系统的看法&#xff08;查看文末了解报告PDF版本免费获取方式&#xff09;。 最…
阅读更多...
签订合同Signing a Contract

签订合同Signing a Contract

前言 加油 原文 签订合同常用会话 ❶ Do you have any comments on this clause? 你对这项条款有什么意见吗？ ❷ We agree with the terms and conditions. 我们同意这些条款及条件。 ❸ Please check the draft of the contract. 请您好好检查合约内容。 ❹ Two origin…
阅读更多...
Python微信订餐小程序课程汇总

Python微信订餐小程序课程汇总

Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 结合chatgpt提问快速掌握python订单小程序开发 快速提问提高学习效率 你将收获 从基础语法入手&#xff0c;构建MVC架构 增进对小程序和后端API的理解认识 从项目搭建到部署上线&#xff0c;让你…
阅读更多...
如何开发和部署微信小程序

如何开发和部署微信小程序

今天开始&#xff0c;用ChatGPT创作技术内容了 要开发和部署微信小程序&#xff0c;您需要遵循以下步骤&#xff1a; 1.注册微信小程序账号&#xff1a; 在微信公众平台注册小程序账号&#xff0c;通过审核后即可开始开发。 2.下载开发工具&#xff1a; 微信小程序开发工具是…
阅读更多...
从中国历年人口数据简单分析未来房价走势（本分析仅供参考）

从中国历年人口数据简单分析未来房价走势（本分析仅供参考）

以下数据来自中国统计局官方网站 如上图可以看到&#xff0c;从1981 - 1997 的连续17年&#xff0c;中国每年人口净出生人口都在2000万以上。然后从1998年开始&#xff0c;逐年减少&#xff0c;从2001年开始至2017年&#xff0c;每年净出生人口基本在1600万左右&#xff0c;近3…
阅读更多...
1.1 波士顿房价预测

1.1 波士顿房价预测

文章目录 一、问题分析1.1 线性回归模型1.2 五步法 二、数据处理2.1 数据导入2.2 数据形状变换2.3 数据集划分2.4 数据归一化处理2.5 封装成load data函数2.6 获取归一化后的训练集和测试集 三、模型设计3.1 前向计算3.2 以类的方式来实现网络结构 四、训练配置4.1 损失函数——…
阅读更多...
如何快速获取并分析自己所在城市的房价行情？

如何快速获取并分析自己所在城市的房价行情？

本文转载自公众号&#xff1a;数人之道 若需要广州二手房源结果数据文件及 Jupyter Notebook 源文件&#xff0c;请扫描下方二维码关注『数人之道』公众号&#xff0c;回复 广州二手房 获取。 12 月 20 日&#xff0c;央行授权全国银行间同业拆借中心公布&#xff0c;最新一期…
阅读更多...
最低2000多，中国房价最低的30城，你会选择吗？

最低2000多，中国房价最低的30城，你会选择吗？

据2020年相关数据&#xff0c;全国商品房平均售价接近万元/平&#xff0c;其中&#xff0c;一二线城市的房价更是普遍超过2万。而我国房价最低的30城&#xff0c;每平米价格最高不过4500&#xff0c;最低仅需2000多元。虽然该统计只是一个相对的概念&#xff0c;但从一定程度上…
阅读更多...
全球房价暴涨超过10%，土耳其房价涨幅高达30%，位居全球第一

全球房价暴涨超过10%，土耳其房价涨幅高达30%，位居全球第一

今年以来&#xff0c;全球多国房价迎来了十年来最大涨幅&#xff0c;这也成了各国民众关注的热门话题。欧洲、北美、日韩等发达国家房价涨幅更是达到惊人的程度。面对高企的价格&#xff0c;许多民众直呼买不起。 全球多国房价持续上涨 朴先生是一位在韩国工作的中国人&#…
阅读更多...
中国房价走势分析——基础数据收集

中国房价走势分析——基础数据收集

目录 一、人口 截止2021年&#xff0c;中国人口中各年代人口总数&#xff1a; 二、买房需求分析 三、买房还是暂时租房&#xff1f; 3.1 买房 3.2 租房 3.3 利息高还是房租高&#xff1f; 四、房贷外的其他解 一、人口 截止2021年&#xff0c;中国人口中各年代人口总数…
阅读更多...
chatgpt赋能python：Python程序中断

chatgpt赋能python：Python程序中断

Python 程序中断 Python 是一种高级编程语言&#xff0c;被广泛应用于数据科学和机器学习等领域。但是&#xff0c;有时候我们需要中断 Python 程序的执行&#xff0c;以便处理意外事件或者出现错误时进行调试。在这篇文章中&#xff0c;我们将探讨 Python 程序中断的各种方法…
阅读更多...
帝国cms微信小程序算命小程序开发之指纹算命实现方法

帝国cms微信小程序算命小程序开发之指纹算命实现方法

基于帝国cms7.5 utf8版本的&#xff0c;算命小程序&#xff0c;指纹算命的方法&#xff0c;因为这个指纹算命&#xff0c;不涉及到算法&#xff0c;只要有五个手指对应的指纹&#xff0c;然后从库中读取数据即可&#xff0c;所以相对来说实现比较容易。 前台界面如下图&#x…
阅读更多...
周易六爻起卦排盘微信小程序

周易六爻起卦排盘微信小程序

最近制作了一款极简风格的六爻排盘小程序。 实现了自动起卦&#xff0c;手工起卦&#xff0c;数据搜索&#xff0c;后台云服务器保存等功能。 支持京房易和藏山卜排盘。 效果展示&#xff1a; 开发当中遇到的一些坑&#xff1a; 1.由于习惯了pascl的单个等于号作为表达式&a…
阅读更多...
星座运势查询微信小程序源码 周公自定义解梦源码

星座运势查询微信小程序源码 周公自定义解梦源码

源码介绍 这是一款以星座运势查询,周公自定义解梦为主的一款小程序 内支持流量主模式插入 多个功能包含如下: 星座查询 星座运势查询 十二生肖查询 生肖运势查询 星座配对 生肖配对 配对排行榜 星盘查询 周公解梦--等等大家自行研究吧 该小程序按照简单,特别容易上手大家可…
阅读更多...
银联对接对账接口

银联对接对账接口

最近在对接银联(UnionPay)的支付,然后有一个超大的雷,想跟大家说一声避一下 大家在对接的时候 肯定都是去官方开放平台中国银联开放平台 下载Demo和SDK 里面对账的接口是这样的 如果使用的是自己注册的测试账户的话 官方文档写的是商户号使用7000000000000001 和固定 的sett…
阅读更多...
对接银联支付接口详解java版mac开发

对接银联支付接口详解java版mac开发

首先&#xff0c;这是一篇工具类的文章了&#xff0c;也是为了备忘&#xff0c;需求就是微信公众号的开发后台对接支付&#xff0c;有银联&#xff0c;支付宝&#xff0c;微信等&#xff0c;我负责写银联的接口。明天大年三十&#xff0c;今天在公司码完字也要灰走了&#xff0…
阅读更多...
UnionPay-银联支付-netcore（二）

UnionPay-银联支付-netcore（二）

前言 最近公司要求支持银联支付&#xff0c;首先就会去参考官方api文档&#xff0c;银联支付官方文档&#xff0c;看完后发现是.net版本的示例文档&#xff0c;版无.netcore版本&#xff0c;于是网上搜索了一下netcore版本&#xff0c;发现讲解的都不全或者没有netcore版本的示…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023