之前写过一个《行高导致和开发间距不一致》;只介绍了行高不一致的原因,以及Android和iOS插件处理行高的方式,安卓字体太多暂时没做解析。

但常常我们都是以iOS为准一稿适配两端,那么如何让两端开发中的字高统一呢?一般我们会以设置行高规范的方式来解决,但其实我们知道安卓字体就是个大杂烩,一些特殊的字体可能会和我们设计稿中的字体相差几个像素高度;由于开发方式的不同几个像素的差异在走查过程中很可能就会翻车。

发现了问题

我们在校验的过程中会发现,安卓有时会和我们的设计稿对不上甚至间距越差越远,iOS可能有时也会,这个时候我们可能就会要求开发调整修改几个像素之类的,但是修改之后开发的间距和我们设计稿还一致吗?和我们的规范还一致吗?出现这个问题的原因就是我们没把规范严格化,也许我们没严格执行,也许开发没严格执行,也许开发和我们实现方式不一致。

说这些是啰嗦吗,肯定是一方出了问题呀,但当我们两方都没出问题,实现的界面还是没对上?头疼不头疼?

还是有问题!问题出在哪里?

我们发现定了行高规范后仍没达到我们想要的效果,如何才能像素级还原,以最优的方案解决问题,和开发在工作之余联调讨论了一个周解决方案后,我们试出个设计还原度最高的方案,并且团队开发侧和设计侧已投入使用,可供参考。

两方不一致

开发对设计不了解实现方式和设计不一致;

开发调用旧代码无法和新设计稿统一;

行高处理方式

由于开发习惯的问题;单行文字实现方式一般是,系统默认行高/去行高的方式/固定或相对行高:

多行文字对应实现方式,设置行间距/相对行高;

以上几种方式是设计中常用方式也是对应移动开发中常用解决方案;了解开发方式会更有助于我们校验设计的还原度。

反求相对行高

实际案例示例分析:

以上为设计稿和iOS侧的处理方式,Web,Android和iOS对字体的处理原理有所不同,但不影响我们找一最优解决方案,相对于Web端由于适配问题则更建议使用相对行高。

以上可总结为:

单行 默认字体行高/去行高,对应多行 固定行高/相对行高/行间距;

字体中的问题

iOS

我们知道目前iOS systemFont字体中 中文使用的是苹方字体,英文和数字使用SF Pro Text ;

之前有个计算默认行高的公式和插件:

我们来测试一下看是否准确找一组常用字号来测试

拿字号56来测试

计算字高为68px;测试结果单行效果完全一致;对其他字号全部跑一遍结果也是一致的,就不一一列举了。

测试多行

在多行测试中和设计稿不太一致。

我们用56px字,默认行高为68px;行间距设置为22px;在sketch中文本控件高度为68*3+22*2=248px

但我们预览控件的时候发现却不是这个高度:

这个高度是123也就是246px;和248px差了2px;我们尝试测试更多行,发现行数越多和设计高度相差越多,这是为什么呢?

看这张图其实就明白了

其实系统的行高是一个六位小数,这也就验证了前边那个求行高公式为什么向上取整了,我们看33.414062向上取整为34则行高为68px,两行在设计稿中为136px;33.414062两行66.828124向上取整为67则行高为134px;和设计稿差2px;行数越多则最终结果和设计稿相差越大,不同字号也有所差异;因此以上算行高公式对单行文本是正确的,多行则不能那么算。

Android在Android平台也是类似此类的算法,但是安卓中会给字体特殊加padding,就导致了安卓默认高度比iOS默认高度高一些,具体高多少也是没有规律的,所以我们出一稿适配两端的时候校验起来特别费劲。

安卓处理行高的方式有三种,设置固定行高/删去上下padding/只保留字高。

效果是这样的:

这里的只保留字高并非是我们设计稿中字号设置多少行高设置多少,而是根据文字绘制的最高点和最低点。

加这行代码去除上下padding

android:includeFontPadding=”false”

由以上,安卓系统默认行高无法和iOS一致,但是去除padding后行高和iOS默认行高非常接近,于是我们测试了一下:

测试 机型 小米(720*1280/1080*1920/1440*2560),华为(1080*1920),vivo(2080*1920/1440*2560)。在测试中发现去掉padding后的行高非常接近iOS默认字体高度,根据字体大小会稍有差异,但是可以这么理解,相同字号中安卓的字体如果比iOS大一些行高就会稍高一点,这么计算也理所应当即使从设计侧如果字号稍大一点我们也应该让空间留的稍大一点,当然这只是一两个像素的差异。

总结字体问题

iOS:可设置固定行高(相对行高)/系统默认行高/去行高(行高等于字号)

Android:可设置固定行高(相对行高)/系统默认行高/去上下padding/保留字高

如何让它俩统一到一块呢,

如果都设置固定行高或相对行高,相同字号中随安卓字体的不同字体稍大会稍挤字体稍小会稍散的感觉,但也不是不可取看能接受的程度。

系统默认行高,两端没法统一,我们没法确定以及统一安卓各个厂商的字体。设计中常常会把行高设为和字号一致,iOS去行高,但在安卓中没法算出和苹方去行高一致的算法,行高和字号设为一致容易翻车,在某些情况下开发设置了控件高度和行高一致的话有些字体是无法显示完的,或者后期调整字体就会有无法显示完的风险。

当然安卓中的保留字高更不可取我们没法这样出设计稿,仅在一个平台以怎样的方式都可以对接。

当使用一稿对接两端的情况,在测试过程中,系统的才是最好的。

首先,如果我们是以iOS规范出设计稿。字体使用的是iOS的系统字体,那么我们就理所应当遵循iOS系统规范去做设计,我们经常感觉开发效果和设计稿差异太大,其实如果两者遵循相同的规范设置参数一致实现效果就应该一致。对于安卓,经测试安卓去除padding后和iOS默认行高最接近,并且使用系统字体,对于安卓校验,我们校验的时候应该是看其参数是否一致。

最终我们采用的方案是:设计稿以iOS系统字体规范出,也就是以上边那个公式算出来的行高,安卓去除includeFontPadding和苹方字体最接近,行间距不用固定行高或相对行高,使用linespace行间距。

在尝试过程中也找到了iOS和设计稿单行多行都完全一致的方案,但需要引用用户字体,也就是非系统字体,我们将苹方字体打包至应用内,对三方字体进行测试发现,打包的苹方行高没有规律:

可以给不同字号设置固定行高,例如我们把引用的苹方设置成和系统行高一样的:

这时我们发现文字显示的位置不对,需要使用baselineOffset属性修正文字在行中的显示位置:

CGFloat baselineOffset = (lineHeight - label.font.lineHeight) / 2;

多行里采用的方式其实就1*n的方式绘制多个单行文本最终高度和设计稿是完全一致的,但是该方案并没有采用,我们知道使用三方苹方字体在英文和数字中就没法获取系统的SF字体,会造成字体不统一,两者需要取舍。

以上内容仅供参考,

最终目的是为了提升设计和开发效率以及两端统一和设计更好验收。

div之间的间距如何去除_如何统一两端开发中的文本行高相关推荐

  1. java写微信小程序答辩问题_微信小程序 开发中遇到问题总结

    微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ...

  2. 微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理

    摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...

  3. td之间的间距怎么改_论文的一级标题、二级标题格式怎么弄?

    其实论文写好了以后,论文格式的调整也是非常重要的,具体的格式一般有以下几点: 标题格式,一级标题.二级标题.三级标题 页码格式,一般是正文之前为罗马数字,正文以后为阿拉伯数字,一般是页脚中间 目录格式 ...

  4. api接口加密_谈谈API接口开发中的安全性如何解决

    如今各种API接口层出不穷,一个API的好与不好可以从很多方面来考量,其中"安全性"就是一个API接口最基本也是最重要的一个特点.本文就来跟大家聊聊关于API接口开发的安全性问题. ...

  5. python开发中遇到的难题_初学者在Python开发中常见的问题(上)

    前言:这篇文章主要介绍了Python程序员代码编写时应该避免的17个"坑",也是Python程序员代码编写时应该避免的17个问题,如果有知友想要了解Python,文末有黑马程序员的 ...

  6. can通道采样频率_哪个是嵌入式开发中最常用的外部总线:RS232?RS485?CAN?LIN?……...

    在做嵌入式开发的过程中,难免会和各种总线打交道,总线开发属于嵌入式开发的基本技能了.对于总线人们一般将其分为:内部总线.系统总线.外部总线. 所谓内部总线一般指MCU和外围集成IC之间数据交互的线.我 ...

  7. ai项目实施步骤_停止AI产品开发中道德责任的6个步骤

    ai项目实施步骤 这是官方的:人工智能(AI)并不是我们想要成为的公正的天才. Google的母公司Alphabet(Alphabet)使用其最新的年度报告来警告称,对其产品的道德顾虑可能会损害未来的 ...

  8. vue项目的停止_基于Vue项目开发中遇到的坑及终结

    之前一直在公司忙项目,忙项目的,好歹是发布了1.0版本.终于是有时间写一个总结了. 话说我就一个实习生一进来就要做项目核心,真的有点受宠若惊,还好项目是1.0版本,先实现部分功能,访问量也不大,加上一 ...

  9. 参数构造错误 微信_快速掌握前端开发中的常见错误

    前言 今天我们来了解一下现在浏览器中支持的一些Error对象,如果你还在经常在捕获到错误的时候不知道该用哪个类型,总是习惯于去throw new Error('xx')的话,相信本文会帮你对error ...

最新文章

  1. HTML标签语义化——使用b标签,还是strong标签
  2. 一步步开发自己的博客 .NET版(5、Lucenne.Net 和 必应站内搜索)
  3. 自己开发的一款基于PagedDataSource的datalist repeater控件,只需要在源程序中添加三行代码,即可实现通用分页
  4. 2021-08-20 python安装及作图
  5. 关于JS括号匹配的面试题
  6. vmware10中开启Intel VT-x
  7. VISIO画立体图——VISIO画图技巧
  8. java集合转字符串 字符串转集合 StringUtils 一个强大的字符串操作工具
  9. 读养生四要有感《慎动篇》
  10. 从Unity商店下载的插件存放的位置
  11. C/C++回溯经典练习:马的走法
  12. 并列关系表合集PPT模板
  13. 视频教程-Nodejs极速入门-Node.js
  14. 09-Further Delays Hit Syria Chemical Weapons Disarmament
  15. mysql数据库语言_mysql数据库sql语句基础知识
  16. android APP自动增量更新
  17. Linux debug 常用命令
  18. 海湾汉字编码表全部_汉字unicode码表范围和常用汉字unicode码
  19. for循环的一个小面试题(请问循环要循环几次?)
  20. 瑞星升级包 下载网站

热门文章

  1. GridView页脚汇总(统计)行的方法(.net 2.0)
  2. MapReduce单机提交(待稿)
  3. [转]MVC+JQuery validate实现用户输入验证
  4. thinkphp5.0架构总览
  5. HDU 1158 Employment Planning【DP】
  6. js中innerHTML与innerText的用法与区别【转自http://blog.sina.com.cn/johnpu】
  7. Java运行时的子类识别
  8. Python3 捕捉异常
  9. SAP云解决方案和企业本地部署(On-Premise)混合架构下的安全认证权限管理
  10. iOS中滤镜处理及相关内存泄漏问题的解决