仿制:
还原字体:
截图,打开FW载入图片
首先调整字体字号与要仿制的文字相同并完全覆盖(第一行即可)
此时我们就得到了行高和字体大小以及字体
现在分析边距
在上面已经测出来行高,在FW测量顶部到字体的距离是30px,字体自带行高为30px,重叠区域的高为10px,那么padding-top:20px;
现在测padding-left的值:
直接得出10px。
最后测量padding-right
此时我们发现左右边距不一样,这时要注意,页面中有文字时,可能文字最后一个不能容纳所以换行,如果右边距设置了比左边距大的值,有可能导致原页面中最后一个文字换到下一行,所以此时一般情况下我们设置与padding-left一样的值就好。虽然在这个案例中,padding-right取10和20没区别,但在别的场景中,很容易发生问题。
代码
*{
padding: 0px;
margin: 0px;
}
.class{
box-sizing: border-box;
width: 270px;
height: 100px;
background-color: #757575;
line-height:30px;
padding-top: 20px;
padding-bottom: 20px;
padding-right:10px;
padding-left:10px;
}