html字体图标设置

精灵技术：

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

精灵技术主要针对背景图片的使用，就是把多个小的背景图片整合到一张大图片中

1精灵图主要针对于小的背景图片的使用

2主要借助背景位置来实现background-position

3一般情况下精灵图都是负值 x轴右边走是正值

字体图标：iconfont

使用场景：主要用于显示网页中通用、常用的一些小图标

精灵图有缺点：

图片文件还是较大、图片本身方法和缩小会失真、一旦图片制作完完毕想要更换非常复杂

字体图标解决了上述问题，展示的是图标，本质属于字体

优点

轻量级：一个图标比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求

灵活性：本质是文字，可以随便改变颜色，产生阴影，透明效果，旋转

兼容性：几乎支持所有浏览器

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

1.字体图标的下载：

2.把下载好的包里面的fonts文件夹放入页面根目录下

2.在css样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中，一定注意字体文件路径问题

3.在htnl标签中添加小图标 span使用字体图标，在span标签中添加的不是普通的文字，添加的是下载好的文件夹中domo.html中找到小方框赋值到span中

4.给span设置字体，设置CSS样式 font-family: 'icomoon';

字体图标的追加和加载：

如果工作中字体图标不够用了，我们需要添加新的字体图标到原来的文件夹中。

把压缩包里里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件夹

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?unghpc');src: url('fonts/icomoon.eot?unghpc#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?unghpc') format('truetype'),url('fonts/icomoon.woff?unghpc') format('woff'),url('fonts/icomoon.svg?unghpc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';font-size: 100px;color: pink;}</style>
</head><body><span></span><span></span>
</body></html>

结果：

html字体图标设置相关推荐

头部导航栏和底部图片pic 字体图标设置文字大小
1.头部导航栏和底部用position: fixed;固定在游览器上面,下方的内容需要margin导航栏的距离,防止下方内容遮住了 2.图片pic 图片用pic套起来,需要给pic设置高宽 3.字体 ...
元件库导入_最新版字体图标元件库分享，一套绝佳的矢量字体图标元件库
这次分享的FontAwesome v5字体图标元件库,是根据官方的最新版本v5.7.2整理完成的,包含了更全面的图标类型和丰富的图标数量,相信可以满足大多数同学在原型设计中的使用需求. FontAwe ...
Bootstrap字体图标
Bootstrap提供了总共263种字体图标可以满足大部分的图标需求为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 1.字体图 ...
小米商城项目实战(二) 分类导航与字体图标
分类导航需求小米商城官方网站: https://www.mi.com/index.html 阿里巴巴矢量字体图标库: https://www.iconfont.cn/ 项目结构阿里巴巴矢量图标库下 ...
Bootstrap 组件-字体图标
Bootstrap提供了总共263种字体图标可以满足大部分的图标需求为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失一个字体图 ...
icomoon字体图标库的使用
1.icomoon地址 Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along ...
layui字体样式设置_layui如何自定义字体图标？（图文介绍）
layui如何自定义字体图标?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui的图标取自于阿里巴巴的矢量图标库 Iconfont 第一步,通过浏 ...
kali字体设置-各种字体图标大小调整总结
前言:经常用虚拟机开kali,有一个众所周知的问题--虚拟机里的字体太小了,各种字体都很小.随意在这里总结一下把各种地方的字体图标调大的方法. kali字体大小设置一.图标大小二.菜单栏大小三. ...
iconfont字体图标，ico图标设置，版心
iconfont字体图标,ico图标设置,版心 1.如何使用iconfont字体图标 IconFont,图标字体也叫字体图标,就是字体做的图标.可以通过设置字体的方式改变图标的样式,受到近些年扁平化 ...

html字体图标设置

html字体图标设置相关推荐

最新文章

热门文章