一、開發(fā)問題
開發(fā)中腻菇，按照設(shè)計稿去做的頁面胳螟，為何總是無法與設(shè)計稿完美對應(yīng)？怎樣才能精準(zhǔn)的還原設(shè)計稿樣式筹吐？
相信大家都遇到過類似問題糖耸，今天來探討下如何通過對齊的方式盡可能精準(zhǔn)的還原文本的展示樣式。
二丘薛、文本的屬性
文本
對圖中做幾點(diǎn)解釋：
- baseline：相當(dāng)于坐標(biāo)原點(diǎn)嘉竟，默認(rèn)設(shè)定中大部分的拉丁字母底部與此對齊，漢字的中下部與此對齊洋侨。
- ascent：字體可繪制區(qū)域的上部最大值舍扰，ascent在大部分情況下會比最高的字符還要高一點(diǎn)點(diǎn)，可能是系統(tǒng)設(shè)定希坚。
- descent：與ascent相似边苹，是字體可繪制區(qū)域的下部最大值，可能為負(fù)值裁僧。
- leading：行間距个束，與傳統(tǒng)意義的行間距并不相同，不同的字體在顯示時視覺上的行間距不同聊疲，這時說的是這個值茬底。
- line height：行高，= ascent + |descent| + leading获洲。
需要注意阱表，以上屬性為字體本身的屬性，應(yīng)該是字體設(shè)計時就定好的，理論上是不可變的（富文本中對應(yīng)
baselineOffset改變的是富文本顯示的對齊方式）
另外最爬，iOS中的字體大小涉馁，即
UIFont的pointSize屬性，并不直接對應(yīng)行高烂叔，一般一個字體是10的文本谨胞，line height一般為11.89固歪，大約為字體大小的1.2倍蒜鸡，所以按照這個結(jié)果來看，iOS字體默認(rèn)是1.2倍行高牢裳。
三逢防、行間距和行高
行高及行間距
繼續(xù)先來對圖中做幾點(diǎn)解釋：
- line space：行間距，直接對應(yīng)兩行文本之間的間距值蒲讯。
- line height of font：每一行文字的高度忘朝。
- 行高：每一行的實(shí)際高度，= line height of font + line space判帮。
-
行高倍數(shù)：
lineHeightMultiple局嘁，幾倍行高，= 行高 / line height晦墙。
四悦昵、NSAttributeString的對應(yīng)屬性
在iOS開發(fā)中使用富文本進(jìn)行行設(shè)置時主要通過段落類型
NSMutableParagraphStyle來進(jìn)行設(shè)置，對應(yīng)富文本中的NSAttributedStringKey.paragraphStyle
主要涉及屬性如下：
-
lineSpacing：行間距晌畅，會在每行位子之間添加間距但指，在首行的頂部與尾行的底部沒有額外的空白。比較符合我們大多數(shù)的需求抗楔，但不太適合和通用型設(shè)置棋凳，因?yàn)椴煌淖煮w大小為實(shí)現(xiàn)相同效果可能需要設(shè)置不同的行間距，比較繁瑣连躏。 -
minimumLineHeight/maximumLineHeight/lineHeightMultiple：最小行高/最大行高/行高倍數(shù)剩岳，這幾個屬性都是直接設(shè)置行高的，存在的問題是如果行高大于文字的高度(line height of font)入热，那么多余的空間會放在該行的上方拍棕，即baseline所在的位置是該行的最底部向上偏移leading + |descent|的位置〔哦伲可搭配使用富文本的baselineOffset屬性來設(shè)置對齊莫湘，但總體不是很方便。
根據(jù)上面提到的一些缺點(diǎn)郑气，開發(fā)中可以考慮組合使用幅垮，例如要求行高為a px，字體大小為b px尾组，則：
- 因?yàn)橄到y(tǒng)中默認(rèn)為1.2倍行距忙芒，所以文字行高為：
line_height_of_font = b * 1.2示弓。 - 文字在行中居中顯示，所以每行中文字與該行頂部的間距：
line_top = (a - line_height_of_font) / 2呵萨。 - 所以每行行高設(shè)置為：
minimumLineHeight = line_height_of_font + line_top = (a - b * 1.2) / 2 + b * 1.2奏属。 - 此時設(shè)置兩行之間的間距為：
lineSpacing = a - minimumLineHeight。 - 最后在計算該富文本行高時潮峦，底部加上一個
lineSpacing囱皿，實(shí)現(xiàn)最后一行與底部的間距。
