正文

精灵图和字体图标(代码片段)

IC-ic.ic  IC-ic.ic  2023-01-08  164

关键词：

文章目录

一、精灵图
二、字体图标
- 1.常用的字体图表网站
- 2.如何引入
总结

一、精灵图

1.什么是精灵图？

精灵图是一种网页图片的应用技术。主要针对背景图片使用，把多个小背景图片合成一个大的图片

2.为什么要用精灵图

（1）减少服务器的访问量，加快加载速度

（2）方便管理这些背景图图片

3.如何使用

1.用Macromedia Fireworks软件加载
2.用切片工具查看所需要图标的x和y轴的位置
3.使用background-position写上x和y坐标
注：一般情况下往左和往上是负值

4.演示

例：提取图片中的x字母

代码如图：

  <style>
        span 
            display: inline-block;
        
        
        .x 
            width: 109px;
            height: 121px;
            background: url(abcd.jpg) -254px -548px;
        
    </style>
</head>

<body>
    <span class="x"></span>
</body>

效果图：

二、字体图标

1.常用的字体图表网站

1.icomoon字库网址：https://icomoon.io/
2.阿里iconfont字库网址：https://www.iconfont.cn/

2.如何引入

1.把fonts文件夹放入根目录

2.字体声明

3.引入对应图标

4.指定相应字体样式

总结

感谢大家的观看

css高级技巧——精灵图，字体图标，三角形等(代码片段)

...！愿我自己学有所成，也愿每个前端爱好者学有所成一.精灵图1.1为什么需要精灵图一查看详情

三十二精灵图&字体图标(代码片段)

一、精灵图1.1为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因... 查看详情

前端基础-css高级(代码片段)

一.精灵图1.为什么需要精灵图减少服务器接收和发送请求的次数，提高页面的加载速度2.精灵图（sprites）的使用原理核心：background-position小测试：拼出自己名字二.字体图标1.优点（了解）轻量级;灵活... 查看详情

01字体图标iconfont的制作与使用--阿里矢量图库(代码片段)

...。但是如果这么做的话，就必须把图片一个个切下来做成精灵图，过于麻烦。而且图标一般都会改变颜色形状，就要求一个图标制作多个状态的图。另外，背景图片还牵扯到background-size的兼容性问题，不容易控制大小和位置。而... 查看详情

前端基础-css高级技巧(代码片段)

css高级技巧一.精灵图1.为什么需要精灵图2.精灵图（sprites）的使用二.字体图标1.优点（了解）2.字体图标的下载3.适用场景4.CSS三角三.CSS用户界面样式1.鼠标样式2.取消表单轮廓和防止拖拽文本域四.vertical-align属性... 查看详情

css精灵图&字体图标

精灵图为什么需要精灵图为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术精灵图（sprites）的使用精灵技术主要针对背景图片。就是把多个小背景图片整合到一张大图片中。这个大图片也... 查看详情

css之精灵图与字体图标

本文内容：精灵图字体图标首发日期：2018-05-01精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访... 查看详情

scss图标字体(代码片段)

查看详情

关于字体图标的问题(代码片段)

作为前端，我们经常需要和美工拿字体图标文件，经常遇到的有eot，ttf，woff，svg拿到字体图标文件，我们就要进行一个字体图标文件css编写，方便后期使用@font-face/*1.首先指定字体的系列,我们指定为字体图标*/font-family:"自定... 查看详情

css高级技巧，包括精灵图字体图标及常见布局技巧

今天主要学习了CSS高级技巧，重点掌握精灵图、字体图标的使用，单行溢出显示省略号和一些常用的布局技巧！今日框架：今日重点：一、精灵图：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度1）精灵图... 查看详情

wpf字体图标样式(代码片段)

1、在网上下载FontICO字体字体压缩包 FontAwesome矢量图标库 2、下载到的压缩包，解压后获得图标字体文件 3、然后把字体文件夹拷贝到项目中，目录为（/fonts/字体文件） ... 查看详情

wpf中应用字体图标(代码片段)

原文:WPF中应用字体图标一、什么是字体图标我们在进行GDI（图形界面）编程的过程中图标是不可少的。近些年随着网络的繁荣和移动应用的繁荣，矢量图的应用越来越火。矢量图是... 查看详情

东拼西凑完成一个“前端框架”-字体图标(代码片段)

...目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；下面简单列出字体图标的优劣势，内容摘自图标字体的优缺点和使用优势轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，... 查看详情

flutter使用字体图标(代码片段)

1.下载阿里图标 2.解压将解压文件放入到lib/style/font/文件下（路径可自定义）：只有iconfont.ttf 有用，别的都可删除，建议留着，方便查看图标 3.配置pubspec.yaml文件fonts:-family:iconfont#引入图标的别名，自定义font... 查看详情

vue项目中使用线上字体图标(代码片段)

字体图标我们都很熟悉，但是在一个项目中字体图标用的非常广泛，如果我们把字体图标下载下来，打包时体积也很大，所以我们可以用线上地址引入到public/index.html中使用使用字体图标一、添加到购物车去阿里... 查看详情

正文