导语: 前端作为web项目开发流程中的一个环节，在实际开发过程中，必定要和ui/交互设计师进行沟通协调，以便保证设计稿能够完全代码化，并且是设计师希望的效果。所以，在这里我总结了一些前端开发需要注意的设计稿的一些东西。
目录
- 设计稿为750px的原理
- 常用中文字体英文名称
- 设计稿和代码化的区别
设计稿为750px的原理
很多前端都不知道为什么设计稿的宽要750，这次我就解释一下通用的说法。
- 手机像素其实是逻辑像素（pt），通常情况下，1pt=2px;
- 设计稿上面的单位一般都是物理像素（px），css一般使用的是px，所以没有用pt;
- 750px已经是人类视觉可以接受的最大的分辨率，再大也看不出效果；
- 一般是以iphone5（320px）或者iphone6（375px）为参考设备；
- 一般情况下的设计稿就是640/750，这样就是最佳的分辨率宽了；
常用中文字体英文名称
下面是一些常用的设计稿字体英文名称。
- 宋体 simsun
- 黑体 simhei
- 微软雅黑 microsoft yahei
- 微软正黑体 microsoft jhenghei
- 新宋体 nsimsun
- 新细明体 pmingliu
- 细明体 mingliu
- 标楷体 dfkai-sb
- 仿宋 fangsong
- 楷体 kaiti
- 仿宋_gb2312 fangsong_gb2312
- 楷体_gb2312 kaiti_gb2312
- 宋体：simsuncss中中文字体（font-family）的英文名称
- mac os的一些：
- 华文细黑：stheiti light [stxihei]
- 华文黑体：stheiti
- 华文楷体：stkaiti
- 华文宋体：stsong
- 华文仿宋：stfangsong
- 儷黑 pro：lihei pro medium
- 儷宋 pro：lisong pro light
- 標楷體：biaukai
- 蘋果儷中黑：apple ligothic medium
- 蘋果儷細宋：apple lisung light
- windows的一些：
- 新細明體：pmingliu
- 細明體：mingliu
- 標楷體：dfkai-sb
- 黑体：simhei
- 新宋体：nsimsun
- 仿宋：fangsong
- 楷体：kaiti
- 仿宋_gb2312：fangsong_gb2312
- 楷体_gb2312：kaiti_gb2312
- 微軟正黑體：microsoft jhenghei
- 微软雅黑体：microsoft yahei
- 装office会生出来的一些：
- 隶书：lisu
- 幼圆：youyuan
- 华文细黑：stxihei
- 华文楷体：stkaiti
- 华文宋体：stsong
- 华文中宋：stzhongsong
- 华文仿宋：stfangsong
- 方正舒体：fzshuti
- 方正姚体：fzyaoti
- 华文彩云：stcaiyun
- 华文琥珀：sthupo
- 华文隶书：stliti
- 华文行楷：stxingkai
- 华文新魏：stxinwei
设计稿和代码化的区别
一般情况下，前端开发对于设计稿的还原程度能够达到95%以上就很不错了，那么为什么会有些许的稍微的差别呢。
网页设计师容易犯的错误
- 以原生app的体验对h5页面进行设计
由于原生app的体验流畅，界面华丽，设计师往往会原生app体验靠拢，尽量参照h5网站进行设计，不要和app作对比。
- 尽量使用计算机自带字体
设计稿上面的字体要考虑到版权和开发的问题，不能天马行空，用一些非常漂亮的优美的字体展现，在编码过程中需要开发下载设计稿的字体并上传服务器，但是却造成盗用版权、性能降低、访问缓慢等诸多现实问题；建议使用系统自带字体。
- 设计稿展现的是最理想的状态
设计稿展现很理想丰满，但是现实很骨感，情况相当复杂，反应不出文本溢出，字体折行，分辨率大小等问题。设计师在设计的时候一定要注意这些问题，设计图是死的，现实是多变的。
前端开发工程师容易犯的错误
- 写代码之前先分析设计稿
三思而后行，拿到设计稿后不要匆匆地去做，写代码，避免返工重写。磨刀不误砍柴工，结构分析一定要先做，分析页面整体布局，有哪些模块，哪些是通用的，特效是什么，有哪些要和设计师再次确认的，没有问题后再动手写代码。
- 仔细审阅设计稿，精确1px编码
在做的过程中，一定要仔细查看内容，包括边框太细没看到，颜色太淡忽略掉等等问题，还有就是单位精确到1px范围内，细节决定成败。
- 要考虑动态内容溢出
内容溢出包括文字溢出，列表溢出，从接口获取数据后内容溢出，拿到设计稿后，确认布局后，就要处理各种溢出问题了。
- 考虑增删元素
要动态评估页面，即便一些动态变动内容删除调也不影响页面整体视觉，即便增加内容也不影响现有页面内容排版布局。
- 考虑可维护性、可扩展性
代码写的过程中，一定要考虑可维护性，能自适应的尽量自适应，比如列表那里再加一个分类项目，可以放下，可以扩展内容。根据实际情况，不限高，不限宽度，以便后面好维护。
以上就是有关设计稿的前端这边要注意的情况。
以上内容出自 guan’blog
