字体图标的原理

共 1579字,需浏览 4分钟

 ·

2021-12-26 08:41


什么是字体图标


对于前端的小伙伴来说,字体应该是再熟悉不过的东西了,对于文字我们可以通过 css 指定文字对应的字体,字号大小,颜色。得益于 css3,我们还可以在 css 中引入服务端字体来实现自定义字体。


而字体图标,顾名思义则是把图标当做字体来使用,通过使用字体图标,我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片,字体图标的大小改变并不会使图像变的模糊。


接触过 bootstrap 的同学应该了解过,bootstrap 里面就预设了很多自定义图标,我们只要在元素上指定对应的 class,就可以显示出图标,接下来,我们就来一步步了解这些操作是怎么实现的。


字体图标和字体的关系


事实上,字体图标其实就是自定义字体,在计算机系统中每个字符都有一个对应的 Unicode 编码,而每一个字符在操作系统中就是一个矢量图形,例如“敏”这个字,对应的 Unicode 编码就是 \u654f,而字体文件的作用,就是用来规定这些编码对应什么样的图形。Unicode 字符集里面,E000 至 F8FF 属于用户自定义区域。用户可以在字体文件里面定义这些字符的对应的形状,通过项目引入加载去找到自定义字符。而字体图标的实现原理就是在这个自定义区域中添加一系列的图标,我们通过指定对应的 Unicode 编码来显示图片。


先做个总结:使用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到「敏」字时会转换成对应的 Unicode 码(可以认为是世界上任意一种文字的特定编号)。再根据 HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体 @font-face ,则加载对应字体文件)对应字体的字体文件。找到文件后根据 Unicode 码去查找绘制外形,找到后绘制到页面上。


那如何让页面展示一个图标呢?我们可以把图标当成文字来操作,步骤如下:

1.在页面上放入该图标的 Unicode 码 (可以自己创建一个)2.让该元素使用我们自定义的字体3.字体对应着我们自己创建的字体库文件4.字体库文件里有关于该 Unicode 码的外形描述

<span class="icon-qq">span><style>@font-face {  font-family: "hello";  src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')}.icon-qq:before { font-family:"hello";content: "\e600"; } style>


引入字体图标iconfont可以提高开发效率和项目的可维护性。


优点

设计不用再切图了,更不需要针对不同场景切出大小、颜色、格式等不同的图片,只需维护一个图标项目库即可。


开发者也不用引用大量图片,也不需要在js中根据不同场景切换不同图片,仅class名就可搞定,修改灵活。尤其在node开发中,节省大量代码,提高可维护性。


字体图标缩放不失真,不会变模糊。


减少网络请求次数,一个 css 文件可包含所有图标。


节约流量,图标是图片格式,每个几K到几十K,而 css 文件一般一共只有几K。


缺点

图标库包含了所有图标,所以维护时如果不慎修改了老的图标,下次开发时更新图标文件就会把潜在影响带进去。所以对以往使用过的老图标的修改删除要谨慎。


如果同时引用多个项目,可能造成个别图标的冲突。解决方案:

1.避免引用多个项目2.在图标库中修改冲突图标的Unicode(16进制)值。


浏览 85
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报