相信很多设计师都会有这样的苦恼，自己的设计图到了前端手上，非常的难看，或者细节上没有还原得那么好。
前端：这里已经完全对齐了。
网站设计：看起来还没完全对齐，我的图也没有切错吧？
前端：字体大小和间距都是按照设计稿来的。
网站设计：这里间距偏差这么大，为什么不按照设计稿？
前端：视觉样式好多，每个设计师的间距好像都不一样。
网站设计：……
腾讯设计师告诉你上海网站设计中如何让设计稿还原度达99%：
1. 字体结构
无论是中文还是西文，我们经常需要用到的无非是字体大小、字重、字色，还有就是经常被我们忽视的行高和行宽，我们从西文字体提取三个最主要的因素，即字高、行高、行宽。基于西文字体的结构转换为中文，我们可以理解为，字高指的就是我们肉眼所能看到的字体的实际高度，而行高指的是字高+上边距＋下边距，反过来说，行高减去字高除以 2 就能得到我们的上下边距，行宽指的就是整个文本的宽度。
2、文字行宽
关于行宽，以设计 banner 的标题及描述文字为例，定义行宽是为了让文本在极限宽度的时候进行换行，再固定好配图的尺寸，从而得到文本与配图之间的间距，定义行宽、行数、字数，能够更好地为运营人员规范输出的文案，避免因字数过多或过少所造成的视觉不平衡。
3、图标视错觉
关于图标，这里提到一个几何学错觉的概念，视觉上的大小、长度、面积、方向、角度等几何构成，
和实际上测得的数字有明显差别的错觉，称为几何学错觉。人眼所接受的视觉平衡，往往不是设计软件上精准的对齐，我们总是会通过调整间距、
大小或角度来补齐一些负空间，让画面保持视觉平衡。
4、有效切图
关于切图，切图之前应跟开发确定好输出的格式和尺寸，确定应该用 SVG，一倍图或是两倍图。SVG 体量小渲染质量好，单色使用时还能替换颜色，PNG 则通常用在实景图，一倍图和二倍图则根据实际需要进行输出。
5、交互细节
如果某个控件或信息模块交互样式较多，那我们可以有一个空白画板来清晰地标注这些状态和样式，很多开发在还原过程中都是一手视觉稿一手交互稿，但视觉设计师作为展示产品最终形态的执行层，很多情况下，视觉阶段依然会有很多需要跟交互和产品沟通修改的地方，所以为了避免遗漏修改点，视觉稿应该呈现最完整的设计细节，这样也会很大程度上节省开发的时间，减少出错的几率。
6、 理性的设计
在 iOS 和 Android 的设计规范中，都有提到过使用「8点栅格」的概念，即建议使用 8×8 的网格系统进行设计，我们都知道 0.5px 的渲染在屏幕上会变模糊，之所以使用 8 的倍数是因为市场上主流的屏幕都能被 8 整除，使用 8 点栅格能够最大程度的让我们所设计的内容样式在屏幕上保持高清显示，而在日常的网页设计中，我其实更加倾向使用 4 点栅格系统。
我们以下图 4 组数列为例，大家可能都曾使用过上面三组蓝色数列中的数值应用到设计中，或以 5 为倍数，或以 10 为倍数、或以偶数为设计逻辑，而实际上以 5 为倍数则会包含奇数，奇数会导致控件文字对不齐，当 5 的倍数和偶数同时使用时，则会出现类似 14、15、16 这种相差为 1 的相邻数，这样会导致我们的尺寸规范不好定义规则，难以形成逻辑，而使用 4 的倍数，他们的公差为 4，不会出现奇数，也不会出现相邻数。