先发一行文字,看一下奇特之处:

09afgjkpqz汉字

这是编辑器自动加的横线

iOS,OS文本容器中都是基线对齐,所谓的基线对齐就是指无论中文字符,数字,英文字符,表情等它们在一行的时候,基线是在同一高度的。图例中的红线就是基线。

1

2

概念:

baseline: 相当于坐标原点。大部分的拉丁字母底部与此对齐,汉字的中下部与此对齐(这是设定)

ascent, descent: 相当于字体可绘制区域的上下最大值。根据自己的观察,ascent 并不一定是最高字符的高度(比如上图的 f),在大部分字体中,ascent 会比最高的字符还要高一些,上面会有个空间。 desecnt 同理。(descent 为负值)

leading: 即行间距。但这个行间距与平时所说的行间距并不是一个东西。在文本编辑器中,选择不同字体的时候,视觉上的每行的距离并不是一样的。有可能就是 leading 不同。这个值可能为 0。(对于 iOS 上的 SF 系列字体,它的值就是 0 )

line height: 即行高。它的值定义为 ascent + descent + leading。(descent 为负值,所以准确的写应该取绝对值)。这也是我们最关心的一个值。

这些值都是字体的属性,是字体的设计者制定的,不可变,不同的字体会不一样。

平时用来表示字体大小的「字号」并不对应上图中的任何值,也就没有一个直接的几何意义。字号准确的说法是 point size。对于一个 point size 是 15 的 SFUI 字体,它的 line height 为 17.900390625, 约为 point size 的 1.2 倍。所以对于这个字体的一行文字,它的行高为 17.900390625。如果硬要显示在 15.0 高度的矩形内,g 和 f 应该会显示不全。

行间距

line height 所代表的高度只是一行文字的高度。可以把一行文字看做以 line height 为高的矩形,多行文字就是这些矩形纵向排列。矩形的间距就是通常我们说的行间距:

而通常所说的「行间距」「行高」「line height mutiple」 这样的词语,描述的就是这个间距的大小。

「行间距」: 直接对应间距的值

「行高」: line height + 间距。可以认为是,除了首行与尾行,每行实际所占的高度

line height mutiple: 即是「 x 倍行高」中的数值。line_height_mutiple = 「行高」/ line_height

不同平台的实现效果

iOS

使用 autolayout 的一行 UIlabel 的高度即为所使用字体的 line height。但 autolayout 中,view 的 frame 的小数点精度会对齐到像素精度。所以 15 号字体的 label 高度为 18.0 point 。

对于多行文字的行间距,可以通过 attributedString 中的 paragraph style 来控制。paragraph style 可以设定如下值:

lineHeightMultiple: 同上面所说的。

minimumLineHeight/maximumLineHeight: 即「行高」

这两个值都会改变行高,只是写法不同而已。但使用它们控制行间距有一个问题,如果行高大于字体的 line height,那么多余的空间将会放在这行的上面: baseline 所在的位置是矩形底边 + ( leading + descent ) 的位置。一个常见的情况,圆形的 avatar 与右侧的 label 顶端对齐,如果使用 lineHeightMultiple,那么为了达到视觉上的对齐,avatar 与 label 的 frame.y 就会不一样。不是很理想。(在使用 insets 或 background color 的时候就会很麻烦)

lineSpacing: 即行间距。

使用 lineSpacing 只会在每行之间添加间距。在首行与尾行外侧并没有额外的空白(当然,line height 里所带的空白仍然存在)。比较符合我们行间距的设定,不存在上面提到的问题。但不同 point size 为了有同样的效果,需要设定不同的 lineSpacing,不如 lineHeightMultiple 使用方便。

实际使用:

4

假设UI提供了这样一种效果,让开发来实现。

5

你开发完之后发现是这样的。

这时候就需要设置富文本的NSBaselineOffsetAttributeName来实现不同字号的文字的垂直居中对齐了。

NSBaselineOffsetAttributeName:@(0.36*(a-b)),a是本行文本最大字号,b是当前文本段的字号。设置为就可以实现4的效果了。至于为什么用0.36这个神奇数字,暂时未知 ̄□ ̄||

6

对于图6的难以理解的UI设计,实现亦可以通过设置NSBaselineOffsetAttributeName来实现。

tablewidget字体显示不全_ios 容器内容显示原理及调整相关推荐

  1. 超简单调整Fedora25遇到的字体小问题——字体渲染问题和输入框内容显示不全...

    第一个问题:字体渲染 抗锯齿效果很不舒服.如图: 锯齿很明显.解决方法,使用gnome-tweak-tool(中文名:优化工具)如果没有,请安装: dnf install -y gnome-tweak ...

  2. Grid++Report打印纸张跳页/显示不全/页脚内容不全/内容方向不对

    ●打印出现跳页问题怎么办? 答:检查模板设计内容是否超出页面设置宽.高,并保证页面设置宽高与打印纸张规格一致. eg:页面设置高为5cm,界面显示内容总高度也要设置为5cm. eg:去掉没有必要的边框 ...

  3. Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)

    在使用 Echarts 图表的过程中,有时候数值会很大导致该轴的刻度显示不全,如图: 这个时候就需要将该轴的刻度值除以 1000 或 10000,再加一个单位来缩短它的长度: Echarts官网中为我 ...

  4. word中图片为嵌入式格式时显示不全_word嵌入图片显示不全怎么办-word嵌入图片显示不全的解决方法 - 河东软件园...

    word是我们最常用的办公组件之一,其具备了强大的文字编辑与文字处理功能,帮助用户轻松的进行编辑,而在使用word的过程中,我们难免需要在其中插入图片,从而帮助我们更好的表达我们的内容,而部分用户在插 ...

  5. word中图片为嵌入式格式时显示不全_word嵌入图片显示不全,教您word插入图片显示不全怎么办...

    相信大家在使用Word进行编辑文档过程中,经常都会遇到需要插入图片情况吧.然后有些时候是不是还会遇到图片显示不全或只显示图片一部分的,或者只显示图片的边框之类的情况呢?所以今天小编将给讲讲word插入 ...

  6. word中图片为嵌入式格式时显示不全_word嵌入图片显示不全-不同类型文档中图片设置的几个小技巧...

    在办公中,我们时常需要编辑文档,特别是有图片的文档涉及到一些格式处理,所以掌握一些编辑文档的技巧是提高工作效率必备的.以下是关于Word和PDF文档插入图片后的一些设置,一起来看看吧! 一.Word文 ...

  7. html打印图片不显示不全,Word里图片显示全打印不全是怎么回事

    打印Word文档的时候,选择的是全部打印,但是在打印的时候,个别页面却出现了打印显示不全的情况,这种问题应该如何解决呢?下面就跟着小编来看看吧. 情况一:打印机驱动可能有问题: 解决方式:点击[开始] ...

  8. IE11更新导致部分网页显示不全、部分软件显示白屏、黑屏的解决办法

    IE更新惹的祸 IE11更新后,出现了一些.首先,发现部分网页显示不全,一些模块一直处于加载状态不能正常显示:然后TX 官方助 手 的页面也出现了白屏的样子,不能正常显示:坦克世界的登陆界面一直显示& ...

  9. android圆形图标显示不全,android 桌面图标显示不全

    android 图标显示不全的现象,分析代码和配置文件如下操作可以解决问题 Workspace.java 文件 cellCountX = 1; while (CellLayout.widthInPor ...

最新文章

  1. C# Winform继承窗体打开设计器白屏的一例解决方法
  2. Bootstrap浅色淡雅个人博客
  3. 隐藏多行文本框的滚动条
  4. PHP面试常考内容之面向对象(3) 1
  5. html安装方正兰亭,方正兰亭字体
  6. 黑客入门,从HTB开始
  7. 如何利用IDM加速下载百度网盘大文件
  8. oom 如何避免 高并发_高并发下的内存管理技巧
  9. SNAT、DNAT、MASQUERADE的区别
  10. 开发:KTV评分系统实现总结
  11. 名帖155 王献之 行书《行书帖选》
  12. 数字图像处理---低高通滤波实验(MATLAB实现)
  13. 每个互联网人才都应该知道的SQL注入
  14. Linux 多线程(附带线程池代码加注释)
  15. View控件获得焦点,TextView获得焦点(focusable),自定义TextView使得其获得焦点,View的onFocusChange()
  16. vue 实现快捷键录入功能
  17. Waukesha点火模块维修点火器维修740822A
  18. 小老虎的微信公众号:iITObserve
  19. python+Anaconda3+pycharm完整的下载安装过程及配置过程
  20. python利用server酱推送IP地址

热门文章

  1. 这款国产BI我推荐了:Tableau+SPSS+python的综合集成
  2. win7 java闪退_win7 sdk manager 闪退
  3. 服务中启动oracle服务,Linux下如何自动启动Oracle服务
  4. 怎样禁用计算机里的防病毒程序,Windows Defender防病毒程序已在Windows 10上完全永久禁用...
  5. setscale方法的用法_基于BigDecimal.setScale的用法小结
  6. r型聚类分析怎么做_【SPSS数据分析】SPSS聚类分析(R型聚类)的软件操作与结果解读 ——【杏花开生物医药统计】...
  7. python 代码转程序_python将代码转换成网页
  8. Python基础教程:json中load和loads区别
  9. Python 基础中20 个小技巧
  10. 一个黑魔法,竟能让Python支持方法重载