仿制:
CSS-18.根据现有字体,通过FW还原字体字号行高
还原字体:
截图,打开FW载入图片

CSS-18.根据现有字体,通过FW还原字体字号行高
CSS-18.根据现有字体,通过FW还原字体字号行高
首先调整字体字号与要仿制的文字相同并完全覆盖(第一行即可)
CSS-18.根据现有字体,通过FW还原字体字号行高

CSS-18.根据现有字体,通过FW还原字体字号行高
此时我们就得到了行高和字体大小以及字体
现在分析边距
CSS-18.根据现有字体,通过FW还原字体字号行高
在上面已经测出来行高,在FW测量顶部到字体的距离是30px,字体自带行高为30px,重叠区域的高为10px,那么padding-top:20px;
现在测padding-left的值:
CSS-18.根据现有字体,通过FW还原字体字号行高
直接得出10px。
最后测量padding-right
CSS-18.根据现有字体,通过FW还原字体字号行高
此时我们发现左右边距不一样,这时要注意,页面中有文字时,可能文字最后一个不能容纳所以换行,如果右边距设置了比左边距大的值,有可能导致原页面中最后一个文字换到下一行,所以此时一般情况下我们设置与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;
}

相关文章:

  • 2022-02-22
  • 2021-04-25
猜你喜欢
  • 2021-11-13
  • 2022-12-23
  • 2021-12-05
  • 2021-10-22
  • 2021-12-15
  • 2022-02-03
相关资源
相似解决方案