字體與文本高度計(jì)算

字體

在 iOS 9 中,新增了兩個(gè)字體家族San Francisco(英文)PingFangSC(簡(jiǎn)體中文)。
其中 San Francisco 分為.SFUIText.SFUIDisplay兩種字體;PingFangSC 分為PingFangSC-Regular、PingFangSC-LightPingFangSC-Medium三種字體。

在 iOS 9 之前,常用英文字體家族為Helvetica NeueHelvetica;常用簡(jiǎn)體中文字體為STHeitiSC。
其中 STHeitiSC 分為STHeitiSC-LightSTHeitiSC-Medium兩種字體;STHeitiSC 字體家族在 iOS 9 中已被移除。

這四種字體的基本屬性如下:(表格中的值均為系數(shù),乘以字號(hào)可以得到真實(shí)的值)

屬性 .SFUIText / .SFUIDisplay Helvetica Neue / Helvetica PingFangSC STHeitiSC-Light / STHeitiSC-Medium
ascender 0.952148 0.952000 / 0.920020 1.060000 0.860000
capheight 0.704590 0.714000 / 0.717285 0.860000 0.778000 / 0.718000
xheight 0.526367 / 0.507812 0.517000 / 0.522949 0.600000 0.591000 / 0.531000
base-line 0 0 0 0
descender -0.241211 -0.213000 / -0.229980 -0.340000 -0.140000
lineheight 1.193359 1.165000 / 1.150000 1.400000 1.000000
leading 0 0.028000 / 0 0 1.000000(0.03)

.SFUIText 與 .SFUIDisplay 的差異主要是字體間距的不同,Text 字體間距較大,使得在小的字體中更加易讀。
在APP里面使用了 SF 字體后,由操作系統(tǒng)自動(dòng)選擇使用 .SFUIText 還是 .SFUIDisplay。當(dāng)字號(hào)小于20號(hào)時(shí),選擇 .SFUIText,否則選擇 .SFUIDisplay。

文本高度計(jì)算

規(guī)則如下:

  1. 文本為空時(shí),高度為字體的 lineHeight。
  2. 只有一行時(shí),高度為字體的 lineHeight + leading。
  3. 如果 leading=0 且 lineSpacing>0,高度為 lineHeight * numOfLines + lineSpacing * (numOfLines - 1)。
  4. 如果 leading=0 且 lineSpacing<=0,高度為 lineHeight * numOfLines。
  5. 如果 leading>0 且 lineSpacing<-leading,高度為 lineHeight * numOfLines。
  6. 如果 leading>0 且 lineSpacing<0 且 lineSpacing>=-leading,高度為 lineHeight * numOfLines + (lineSpacing + leading) * (numOfLines - 1)。
  7. 如果 leading>0 且 lineSpacing>=0 且 lineSpacing<=leading,高度為 lineHeight * numOfLines + leading * (numOfLines - 1)。
  8. 如果 leading>0 且 lineSpacing>leading,高度為 lineHeight * numOfLines + lineHeight * (numOfLines - 1)。

代碼:

func textHeight(numOfLines: Int, lineHeight: CGFloat, leading: CGFloat, lineSpacing: CGFloat) -> CGFloat {
    if numOfLines == 0 {
        return lineHeight
    }
    else if numOfLines == 1 {
        return lineHeight + leading
    }
    
    if leading == 0 {
        if linespacing > 0 {
            return lineHeight * CGFloat(numOfLines) + linespacing * CGFloat(numOfLines - 1)
        } else {
            return lineHeight * CGFloat(numOfLines)
        }
    }
    else if leading > 0 {
        if linespacing < -leading {
            return lineHeight * CGFloat(numOfLines)
        }
        else if linespacing < 0 {
            return lineHeight * CGFloat(numOfLines) + (linespacing + leading) * CGFloat(numOfLines - 1)
        }
        else if linespacing <= leading {
            return lineHeight * CGFloat(numOfLines) + leading * CGFloat(numOfLines - 1)
        }
        else {
            return lineHeight * CGFloat(numOfLines) + linespacing * CGFloat(numOfLines - 1)
        }
    }
    else {
        fatalError("leading of font < 0")
    }
}

其他需要注意的事項(xiàng):

  1. 計(jì)算文本高度時(shí),必須包含 NSStringDrawingUsesLineFragmentOrigin 參數(shù),否則只能是單行。
  2. 計(jì)算文本高度時(shí),如果不包含 NSStringDrawingUsesFontLeading 參數(shù),leading 為 0;否則取字體的 leading。
  3. Heiti SC 的 leading 值為 1.00,但參與計(jì)算的值是 0.03。
  4. iOS 9 開始 Heiti SC 會(huì)被強(qiáng)制替換為 PingFangSC。
  5. 由于 Heiti SC 的 lineHeight=1,而 PingFangSC 的 lineHeight=1.4,iOS 9 前后的漢字行間距存在差異。
  6. iOS 9 開始默認(rèn)英文字體為 SF 系列,原有的 Helvetica 系列仍然可以使用。
  7. San Francisco 系列中的 SF 用在 OS X 和 iOS 中,SF Compact 用在 Watch OS 中。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 對(duì)蘋果近來的動(dòng)向似乎有些麻木,新系統(tǒng)似乎變化不大,6S也沒有什么讓人驚艷之處,也就是Force Touch應(yīng)用到手...
    TerryFan閱讀 11,360評(píng)論 9 22
  • 字體是界面設(shè)計(jì)中重要的構(gòu)成要素之一,它能輔助信息的傳遞,是文字的外在表現(xiàn)形式;字體還可以通過其獨(dú)有的藝術(shù)魅力,表達(dá)...
    Neil彭彭閱讀 3,080評(píng)論 1 21
  • 大家都知道,在不同操作系統(tǒng)、不同游覽器里面默認(rèn)顯示的字體是不一樣的,并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡...
    陳_宣閱讀 2,070評(píng)論 0 7
  • 最近準(zhǔn)備給 VirtualView-iOS 的文本元素新增一個(gè) lineHeight 屬性,以便和 Virtual...
    Imkata閱讀 3,911評(píng)論 2 5
  • 什么是“氣虛”,想必大家知道的很少。此文,為大家一一列知。 首先,氣虛是中醫(yī)的一個(gè)術(shù)語,是指由于元?dú)獠蛔阋鸬囊幌?..
    東方葉子閱讀 600評(píng)論 0 1

友情鏈接更多精彩內(nèi)容