iOS 自定義字體出問題啦!

本篇文章講的是在實際項目中碰到一款自定義字體在展示上出現(xiàn)問題腊嗡,然后運用先進的蘋果爸爸的工具來解決這個問題的故事舷手。

1. 自定義字體出什么問題了拧簸?

設(shè)計師們的作品總是千變?nèi)f化,為了成就他們聚霜,作為程序員的我們只好滿足他們嘍狡恬。

所以當設(shè)計師用到一款神奇的字體的時候,我是不會拒絕的蝎宇,就像下面這個樣子:

神奇的字體

為了讓大家能更好的看到這個問題,我把 label 設(shè)置了一個背景色祷安,label 的 width 和 height 都等于50±呀妫現(xiàn)在,在 storyboard 中看起來是沒問題的汇鞭,讓我們 Run 一下:

實際運行的效果

對比 system font 字體的 label凉唐,明顯感覺這個 DINCondensedC 字體的內(nèi)容是偏上的!(當然不用對比也能發(fā)現(xiàn))霍骄。WTF台囱!

2. 解決思路

2.1 既然是內(nèi)容偏上,那么是否和 content Mode 有關(guān)读整?

可惜的是簿训,經(jīng)過嘗試,改變 contentMode 并不能對 UILabel 產(chǎn)生任何影響(實際繪制內(nèi)容中包含下方的空白)米间。

結(jié)論:不可行

2.2 繼承 UILabel 并重寫 drawRect 强品?利用 CoreText 繪制字體?

這兩種方案應(yīng)該是可行的屈糊,但是的榛,為了這個小字體,用得著這么復(fù)雜的【計算字體大小】-【通過字體大小與 label 高度計算偏移量】-【用到這個字體的 label 統(tǒng)一換成 XXLabel 】流程嗎逻锐?

萬一哪天設(shè)計師說:來夫晌,咱們來個富文本雕薪,中間這幾個字用 DINCondensedC 字體,兩邊的字用 system 字體晓淀,那你不是要哭了所袁?

結(jié)論:不可行

2.3 程序解決不了,那就用人解決吧

讓我們找到可愛的設(shè)計師要糊,請他喝個下午茶纲熏,搓頓不錯的晚飯,帶他做個大保健锄俄,然后和他說:兄弟這個UI圖可以換個字體嗎... 算了成本有點高局劲。

結(jié)論:不可行

2.4 可否從字體入手,自己修改字體奶赠?

既然字體有點不太正常鱼填,那么我們只能使出大招:自己動手修改這個字體。據(jù)說有一款 App:Glyphs 對于制作/修改字體來說毅戈,很強大苹丸!然后讓我們好好下載,靜靜等待吧苇经。下載完畢打開這個【PT DIN Condensed Cyrillic.ttf】字體文件赘理,沒想到這個軟件還收費,只能試用幾天扇单。試用就使用吧商模,但是,這個字體里的每個字符我都要一個一個去改蜘澜?作為程序員施流,不能忍!

結(jié)論:不可行

3. 最終的解決方案

最后還是得靠蘋果爸爸鄙信,大家的好爸爸瞪醋。蘋果提供了一款字體修改工具:Apple Font Tool Suite。下面就讓我們用該工具來解決這個棘手的問題装诡。

3.1 下載該工具

進入這里银受,滾到最下方,可以看到【Apple Font Tool Suite】慎王,點擊下方的下載蚓土,下載一個適合自己 Xcode 版本,下載完成后無腦安裝赖淤。

3.2 獲取字體的信息文件

打開終端蜀漆,輸入:ftxdumperfuser -t hhea -A d PT\ DIN\ Condensed\ Cyrillic.ttf,前面的【ftxdumperfuser -t hhea -A d 】為指令咱旱,后面的為你的字體文件路徑确丢。最后回車绷耍,你會看到同級文件夾下回多出一個【DINCondensedC.hhea.xml】文件:

字體信息文件
3.3 修改字體文件中的信息

讓我們打開這個字體文件,你會看到:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE hheaTable [
<!ELEMENT hheaTable EMPTY>
<!ATTLIST hheaTable versionMajor CDATA #IMPLIED
    versionMinor CDATA #IMPLIED
    ascender CDATA #IMPLIED
    descender CDATA #IMPLIED
    lineGap CDATA #IMPLIED
    advanceWidthMax CDATA #IMPLIED
    minLeftSideBearing CDATA #IMPLIED
    minRightSideBearing CDATA #IMPLIED
    xMaxExtent CDATA #IMPLIED
    caretSlopeRise CDATA #IMPLIED
    caretSlopeRun CDATA #IMPLIED
    caretOffset CDATA #IMPLIED
    metricDataFormat CDATA #IMPLIED
    numberOfHMetrics CDATA #IMPLIED
>
]>


<!--

    Data generated  Sun Aug 13 18:51:10 2017

    Generated by ftxdumperfuser build 347,
        FontToolbox.framework build 257

    Font full name: 'PT DIN Condensed Cyrillic'
    Font PostScript name: 'DINCondensedC'

-->


<hheaTable
    versionMajor="1"
    versionMinor="0"
    ascender="700"
    descender="-209"
    lineGap="68"
    advanceWidthMax="889"
    minLeftSideBearing="-270"
    minRightSideBearing="-22"
    xMaxExtent="844"
    caretSlopeRise="1"
    caretSlopeRun="0"
    caretOffset="0"
    metricDataFormat="0"
    numberOfHMetrics="234"
    />

沒錯這是個 XML 文件鲜侥,它里面包含了字體的一些公共信息:

  • ascender:從字體的 baseLine 到最高處的距離
  • descender:從字體的 baseline 到最低點的距離
  • lineGap:印刷線的間距
  • ...

這里面的每一項信息褂始,都可以從蘋果的:hheaTable文檔 這篇文檔中找到。文檔中可以看到描函,一款字體也是一個大工程崎苗。

今天我們要解決的,是【DINCondensedC】字體偏上的問題舀寓,因此胆数,讓我們來調(diào)節(jié)調(diào)節(jié) ascender 這個屬性,將它從700改為900互墓,然后保存文件必尼。

3.4 將修改完的文件注入原 ttf 文件

打開終端,輸入:ftxdumperfuser -t hhea -A f PT\ DIN\ Condensed\ Cyrillic.ttf篡撵,注意這里 -A 后面的 d 已經(jīng)換成了 f 判莉,回車。

3.5 替換原工程中的字體文件

切回我們的工程育谬,替換原字體文件券盅,Run 一下:

修改后的字體

問題已解決!

4. Demo地址

點擊這里直達倉庫

  • CustomFontIssues 為字體有問題的工程
  • CustomFontIssuesResolve 為已解決字體問題的工程

歡迎品嘗~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膛檀,一起剝皮案震驚了整個濱河市渗饮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宿刮,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件私蕾,死亡現(xiàn)場離奇詭異僵缺,居然都是意外死亡,警方通過查閱死者的電腦和手機踩叭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門磕潮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人容贝,你說我怎么就攤上這事自脯。” “怎么了斤富?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵膏潮,是天一觀的道長。 經(jīng)常有香客問我满力,道長焕参,這世上最難降的妖魔是什么轻纪? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮叠纷,結(jié)果婚禮上刻帚,老公的妹妹穿的比我還像新娘。我一直安慰自己涩嚣,他們只是感情好崇众,可當我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著航厚,像睡著了一般顷歌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上阶淘,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天衙吩,我揣著相機與錄音,去河邊找鬼溪窒。 笑死坤塞,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的澈蚌。 我是一名探鬼主播摹芙,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼宛瞄!你這毒婦竟也來了浮禾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤份汗,失蹤者是張志新(化名)和其女友劉穎盈电,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杯活,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡匆帚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了旁钧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吸重。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖歪今,靈堂內(nèi)的尸體忽然破棺而出嚎幸,到底是詐尸還是另有隱情,我是刑警寧澤寄猩,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布嫉晶,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏车遂。R本人自食惡果不足惜封断,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望舶担。 院中可真熱鬧坡疼,春花似錦、人聲如沸衣陶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽剪况。三九已至教沾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間译断,已是汗流浹背授翻。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孙咪,地道東北人堪唐。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像翎蹈,于是被迫代替她去往敵國和親淮菠。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一荤堪、概念 參考網(wǎng)頁字體Serif和Sans-serif的區(qū)別及瀏覽器字體的設(shè)置CSS Font知識整理總結(jié) 1.F...
    合肥黑閱讀 6,218評論 0 12
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理合陵,服務(wù)發(fā)現(xiàn),斷路器澄阳,智...
    卡卡羅2017閱讀 134,659評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,160評論 25 707
  • 9/30 小雨 一個人獨處總是孤獨的拥知,好像一直是這樣。又是一個人在寢室里挑燈夜戰(zhàn)碎赢,做著看似無用功的抄寫举庶,...
    Camelia_liu閱讀 163評論 3 3
  • 最年輕的法國總統(tǒng)馬克龍以65.5%得票率當選法國新一任總統(tǒng)。即將和他一起牽手入駐法國總統(tǒng)愛麗舍宮的揩抡,是他64歲的夫...
    王老二也閱讀 215評論 0 2