appcss导⼊字体⼤⼩,app设计中的字体⾏⾼
在ui设计的过程中由于字体⾏⾼的导致设计的还原出现问题的地⽅挺多的。
例如我再sketch中设计两个16px的字体同样的距离在不同⾏⾼的情况下会导致他们的间距不同(如图所⽰)因此由于在开发中默认间距和sketch不同导致有时候设计稿标注的间距和实际实现出现误差。
下图中我就是⽤sketch模拟同样在16px字体下不同⾏⾼可以看出间距是44px 42px 48px 这也就是开发过程中出现误差的原因
为了搞清楚这个问题我⽤sketch做了10pt~20pt (sketch中的字体单位是px但是由于是⼀倍图所以在ios开发中直接对等pt不⽤转换)ui设计中常⽤到的字体范围并测量其⾏⾼
同时⽤xcode和html做了⼀个页⾯展⽰字体并设置字体背景⾊⽤来测量⾏⾼如下图所⽰
这⾥解释⼀下
1.所有的⾏⾼测试都是以iphone8 (750*1334)尺⼨测量的的。
2.其中sketch我做的⼀倍图所以以pt为单位转换为px的画就是x2，
3.还有html由于在头部添加了
``
手机上可以打html与css的app代码所以我在写代码的时候是按照⼀倍图的px，其实这⾥的px相当于pt(我这⾥不做过多解释其实我也解释不清(*￣︶￣)： 就是加了这个代码后我可以直接按照⼀倍图给的尺⼨写和xcode开发⼀样只是我单位还是⽤的px)
还有就是 html的我做了两种情况
第⼀种是默认的
第⼆种是css中设置了 line-height: 1;(表⽰所有的⾏⾼和字体⾼度⼀样)
所以可以看出
同样的字体出现了各种⾏⾼.
这⾥我们⼀下规律(字体⼤⼩和⾏⾼相对字体⾼度的增加量)
xcode：
sketch：
html( line-height: 默认)
这⾥为了统⼀还是把字体的⼤⼩px变成pt
html(line-height:1)
设置line-height:1后⾏⾼就是字体⾼度
通过上⾯可以看出
不同的开发模式下字体的⾏⾼和字号规律不同，我们要做的事尽量统⼀来做到减少误差。
要么我们向开发靠拢要么你出规范规定各种字体的⾏⾼，
这⾥我说⼀下我平常⼯作中怎么做：
html+css+js(前端)开发的项⽬⼀般都会在项⽬中放⼊⼀个css的reset⽂件来对默认样式进⾏reset，⼀般都是设置成line-height:1，这样我们⽤sketch做设计稿的时候必须把所有的字体的⾏⾼都设置成字号⼤⼩。
如果是原⽣iOS的开发那么⼤家可以看看这个⽂章(我写的内容也有参考这个⽂章 表⽰感谢)
⽂章也有讲解字体问题并且还提供了⼀个sketch插件，插件的左右就是遍历你设计稿中的字体然后按照iOS开发的 默认⾏⾼进⾏设置。
接下来你就可以愉快的设计了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。