前端之还原设计稿篇

最近来了个有设计感的产品，经常扣设计稿细节，因此研究了一些能更好还原设计稿的东西。

 

1.Chrome浏览器默认显示最小字体为12px，但是用scale可以把字体设置得更小。

目前来看其实即使缩小也很有可能达不到设计稿的效果，折中的方案是：太小的文字直接用图片

参考资料：

https://blog.csdn.net/weixin_36210698/article/details/85219282

https://blog.csdn.net/im_dogg/article/details/93891050

2.在<span>中设置text-align:right不起作用

text-align:right 在span不能使用，延伸出来，行内元素也非常有可能使用不了。

解决方式：

1.可以让span采用float的方式，假装文字已经偏向了。。。

2.display: inline-block;/*行内元素*/，把元素的display属性设置为inline-block或类似的

参考资料：

https://blog.csdn.net/shi_ly/article/details/107952669

https://blog.csdn.net/firewhitwind/article/details/79222171

3.font-family 定义的最后为什么要加一句sans-serif?

CSS 定义了 5 种通用字体系列

• Serif 字体
• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体

它们各有各的区别，会影响字体带不带衬线

如果设计稿要求高一点，可能会追究到文字带不带衬线这一层。

ps：在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读

参考资料：

https://www.cnblogs.com/mybest/archive/2012/02/24/2366232.html

https://www.runoob.com/css/css-font.html

https://www.cnblogs.com/herizai/p/8463916.html