# 常用Meta标签  
## 移动端常用Meat标签  
自适应手机屏幕



```html
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

```

## 各参数解析  

|  参数 |  取值 |   说明   |
| :--: | :--: | :--: |
| width |正整数 或 device-width	| 定义视口的宽度，单位为像素 |
| height |	正整数 或 device-height	| 定义视口的高度，单位为像素，一般不用|
| initial-scale |	[0.0-10.0]	| 定义初始缩放值 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale |	[0.0-10.0]	| 定义放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable	| yes/no	| 定义是否允许用户手动缩放页面，默认值yes |

HTML-常见meta标签

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

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



### 使用方式  
background-image  
background-position  

### Eg  
以王者荣耀(https://pvp.qq.com/  )官网中的下载游戏为例  
![精灵图示例](https://cos.dwxzbz.com/blogphoto/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/%E9%9B%AA%E7%A2%A7%E5%9B%BE.png)  

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




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


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

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

### 字体库  
icomoon  https://icomoon.io/  
阿里iconfont  https://www.iconfont.cn/  


### 字体图标的下载和使用  
#### 字体图标的下载  
以iconfont为例  

- 打开官网登录后，搜索想要的图标加入购物车,然后点击购物车图标，选择添加至项目,然后下载至本地 
![字体图标的使用1](https://cos.dwxzbz.com/blogphoto/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/icon%E7%9A%84%E4%BD%BF%E7%94%A81.png)

![自定义图标的使用2](https://cos.dwxzbz.com/blogphoto/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/icon%E7%9A%84%E4%BD%BF%E7%94%A82.png)


#### 字体图标的使用  
- 字体图标下载后默认是压缩包，解压后将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";
}

```