中学加强校园网站建设,关于学校网站建设,国内品牌营销成功案例,做创意小视频的网站目录 1.精灵图
1.1为什么需要精灵图
1.2 精灵图#xff08;sprites#xff09;的使用
2.字体图标
2.1字体图标的产生
2.2字体图标的优点
2.3字体图标的下载
2.4字体图标的引入
2.5字体图标的追加 1.精灵图
1.1为什么需要精灵图 一个网站往往回应用很多的小背景图像作…目录 1.精灵图
1.1为什么需要精灵图
1.2 精灵图sprites的使用
2.字体图标
2.1字体图标的产生
2.2字体图标的优点
2.3字体图标的下载
2.4字体图标的引入
2.5字体图标的追加 1.精灵图
1.1为什么需要精灵图 一个网站往往回应用很多的小背景图像作为修饰当一个网站中图像过多的时候服务器会频繁的接受和发送请求图片造成服务器请求压力大者将大大降低页面加载的速度。 因此为了有效的减少服务器接受和发送请求的次数提高页面加载的速度出现了CSS精灵技术也称 css sprite css雪碧。
核心原理 将网页中的一些小背景图像整合到一张的图像中这样服务器只需要一次请求就可以了
1.2 精灵图sprites的使用
使用精灵图的核心
精灵图技术主要针对于背景图片的使用就是把多个人小背景图片整合到一张大的图片中。这个大图片也称为sprites 精灵图或者 雪碧图移动背景图片位置此时可以使用 background-position移动距离就是这个目标图片x和y轴坐标网页中坐标有所不同。因为一般情况下都是往上往左移动所以数值是负值。使用精灵图的时候需要精确测量每个图片的大小和位置。
使用精灵图核心总结
精灵图主要针对于小的背景图篇使用主要借助于背景图片位置俩实现-- background-position一般情况下精灵图都是负值千万注意网页中的坐标x轴右边走是正值左边走是负值y轴同理
2.字体图标
2.1字体图标的产生
字体图标的使用场景主要用于显示网页中通用常用的一些小图标。
以前都是用精灵图来做的不过精灵图有很多的缺点。
图片本身还是比较大的。图片本身放大和缩小都会失真。一旦图片制作完毕咸阳跟换是非常复杂的。
此时有一种技术的出现很好的解决了以上问题即使字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用展示的是图标本质属于字体。
2.2字体图标的优点
轻量级一个图标要比一系列的图像要小。一旦字体加载了图片就会马上渲染出来减少了服务器的请求。灵活性本质其实是文字可以很随意的改变颜色产生阴影透明效果旋转等。兼容性几乎支持所有的浏览器请放心使用
注意字体图标不能代替精灵技术只是对工作中部分图标的提升和优化
总结
如果遇到一些结构和样式比较简单的小图标就用字体图标。如果遇到一些结构和样式复杂的小图片就用精灵图。
字体图标的使用
字体图标是一些网页常见的小图标我们直接网上下载即可因此使用可以分为
字体图标的下载字体图标的引用引入到html网页中字体图标的追加以后添加新的小图标
2.3字体图标的下载
推荐网站
https://iconion.com/posts/icomoon/https://iconion.com/posts/icomoon/ IcoMoon 成立于2011年退出了第一个自定义图标字体生成器它允许用户选择所需要的图标使他们称一字型该字库内容种类繁多非常全面唯一的遗憾是国外服务器打开网速慢。
https://www.iconfont.cn/https://www.iconfont.cn/阿里M2UX的一个iconfont 字体图标库包含了淘宝图标库和阿里图标库。可以使用Ai制作图标上传代码。免费。
2.4字体图标的引入
下载完毕之后注意原来的文件不要删除后面还会使用。
1.把下载包里面的 fonts 文件夹放入页面根目录下。
2.在css样式中全局声名字体简单理解把这些字体文件通过css引入到我们的页面中。一定要注意字体文件路径问题。 font-face {font-family: icomoon;src: url(fonts/icomoon.eot?p4ssmb);src: url(fonts/icomoon.eot?p4ssmb#iefix) format(embedded-opentype),url(fonts/icomoon.ttf?p4ssmb) format(truetype),url(fonts/icomoon.woff?p4ssmb) format(woff),url(fonts/icomoon.svg?p4ssmb#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;
} 3.html 标签内添加小图标 代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 字体声明 */font-face {font-family: icomoon;src: url(fonts/icomoon.eot?p4ssmb);src: url(fonts/icomoon.eot?p4ssmb#iefix) format(embedded-opentype), url(fonts/icomoon.ttf?p4ssmb) format(truetype), url(fonts/icomoon.woff?p4ssmb) format(woff), url(fonts/icomoon.svg?p4ssmb#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;}span {font-family: icomoon;font-size: 100px;color: palegoldenrod;}/style
/headbodyspan/span
/body/html
2.5字体图标的追加
如果在工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json 重新上传然后选取自己想要的图标重新下载压缩包并替换原来的文件即可。
