性能优化-CSS相关

精灵图

对于多个小图标，往往会采用多个图合在一张大图的方式，这种图称之为精灵图

特点

可以减少客户端对服务器的图片http请求

使用方式

background-image
background-position

Eg

以王者荣耀(https://pvp.qq.com/ )官网中的下载游戏为例
精灵图示例

通过设置背景图和背景图定位实现

字体图标iconfont

说明

精灵图文件还是较大
图片存在失真情况
字体图标本质是文字可以设置大小颜色，且是矢量的

特点

轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，字体图标马上就会渲染出来，减少了服务器请求
灵活性：字体图标本质上是文字，可以设置颜色、阴影、透明等效果
兼容性：几乎支持所有浏览器

注意点

并不能完全代替精灵图技术，字体图标只适用于小图标icon
复杂一些的小图片还是采用精灵图

字体库

icomoon https://icomoon.io/
阿里iconfont https://www.iconfont.cn/

字体图标的下载和使用

字体图标的下载

以iconfont为例

打开官网登录后，搜索想要的图标加入购物车,然后点击购物车图标，选择添加至项目,然后下载至本地

字体图标的使用

字体图标下载后默认是压缩包，解压后将fonts文件中的svg、ttf、woff、woff2放到根目录

bash
font_3681988_2s9pxtazng7
├── demo.css
├── demo_index.html
├── iconfont.css
├── iconfont.js
├── iconfont.json
├── iconfont.svg
├── iconfont.ttf
├── iconfont.woff
└── iconfont.woff2

打开iconfont.css文件，然后复制?t=中的这一串数字，这个就是时间戳


@font-face {
  font-family: "iconfont"; /* Project id 3681988 */
  src: url('iconfont.woff2?t=1681032637031') format('woff2'),
       url('iconfont.woff?t=1681032637031') format('woff'),
       url('iconfont.ttf?t=1681032637031') format('truetype'),
       url('iconfont.svg?t=1681032637031#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myicon-renminbi:before {
  content: "\e66b";
}

实际使用时，一般将其放在common.css中


/*阿里字符图标 start*/
@font-face {
  font-family: "iconfont";
  /* Project id 1479300 */
  src: url('../font/iconfont.woff2?t=1681032637031') format('woff2'),
    url('../font/iconfont.woff?t=1681032637031') format('woff'),
    url('../font/iconfont.ttf?t=1681032637031') format('truetype'),
    url('../font/iconfont.svg?t=1681032637031#iconfont') format('svg'),
}

.iconfont,
[class^="myicon"],
[class*="myicon"] {
  font-family: "iconfont" !important;
  font-size: 12px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myicon-renminbi:before {
  content: "\e66b";
}

字体图标通过代码使用

引入字体

在common.css中引入后，页面具体使用时只需要书写类名即可


<p class="myicon-renminbi"></p>

比较好的使用方式

通过CSS3属性选择器和伪类选择器添加公用样式，然后使用伪类选择器单独添加字体图标

Eg


[class^="icon"]:before, [class*="icon"]:before{
font-family:"iconfont" !important;
  font-size:1.6rem;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
...
.iconsd:before {
  content: "\e610";
}

.iconwendu:before {
  content: "\e788";
}

目录

精灵图

特点