切图？切图！——切图仔html&css秃头指南

我又开始写博客了
本来平时是使用公司内部的语雀来进行日常工作的记录，但是想了想，一些不涉及内部知识的东西还是写在公共平台上比较好。随时可以查得到。被看到的可能性更大，错漏也会被指出。蛮好的。

这段时间第一次接触c端的工作，需要学习的地方很多。除了干杂活之外，终于正式开始了模块的开发。（虽然只是协助大佬开发，先做切图。

1 切图是什么？

我开始听到“切图”两个字的时候，以为是ui设计的切图。然而最后发现是，除了调用接口、数据处理和联动等高级逻辑之外的html、css以及基本的逻辑部分。
目前知做了一次切图，所以只总结一部分内容。

2 css优化

2.1 兼容性查询

can i use it
一个成熟的大佬和一个新手切图仔最重要的积累差距就是在css上。ccs海无涯，回头是岸～
这次被指出了一些不成熟的写法，现在记录下来。后续避免同样的错误。

2.2 字体

字体这部分我一般在开发的时候直接复制粘贴ui给的字体，很少会去思考字体的选择。没想到这次在字体上出了错。

2.2.1 默认字体：

这里设计给出的字体是PingFangSC-Semibold。但在写css的时候stylelint就给我报错了，当时只是以为字体没引入之类的，没太放在心上，直接注释掉了。后来才知道这个字体是ui设计软件的默认字体。遇到这种情况字体其实不用设置，因为各个系统都有自己的默认字体。
关于各个系统的默认字体可参考：各个系统的前端字体

2.2.2 引入外部字体

这里又出现了之前没有见过的三个属性：

• 关于font-style
• 关于font-display
• 关于unicode-range
• unicode-range的骚操作

@font-face {
   
  font-family: "CSD";
  src: url("https://xxxxxxxx.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+30-39, U+A5, U+3A;
}

2.2.3 rgb和#ccc的选择？

一般来讲，如果字体有透明度的要求，则使用rgb来进行设置，毕竟代码会少一行不是。

opacity: 0.8;
color: #000000; 
// 改为：
color: rgba(0,0,0,.8);

2.3 居中

居中是最最最常见和有最多种方案实现的需求。垂直居中、水平居中，各种方案总有一种能够实现。
在这次切图的过程中也暴露了我的一个问题，那就是，我会习惯性地使用position、top、transform的方式。当然这个方式肯定是对的只是有的时候会不太合适。

2.3.1 flex实现文本垂直居中

本来使用的就