iOS 自定義字型出問題啦！

weixin_34337265發表於2017-08-13
iOS自定義字型

本篇文章講的是在實際專案中碰到一款自定義字型在展示上出現問題，然後運用先進的蘋果爸爸的工具來解決這個問題的故事。

1. 自定義字型出什麼問題了？

設計師們的作品總是千變萬化，為了成就他們，作為程式設計師的我們只好滿足他們嘍。

所以當設計師用到一款神奇的字型的時候，我是不會拒絕的，就像下面這個樣子：

神奇的字型

為了讓大家能更好的看到這個問題，我把 label 設定了一個背景色，label 的 width 和 height 都等於50。現在，在 storyboard 中看起來是沒問題的，讓我們 Run 一下：

實際執行的效果

對比 system font 字型的 label，明顯感覺這個 DINCondensedC 字型的內容是偏上的！（當然不用對比也能發現）。WTF！

2. 解決思路

2.1 既然是內容偏上，那麼是否和 content Mode 有關？

可惜的是，經過嘗試，改變 contentMode 並不能對 UILabel 產生任何影響（實際繪製內容中包含下方的空白）。

結論：不可行

2.2 繼承 UILabel 並重寫 drawRect ？利用 CoreText 繪製字型？

這兩種方案應該是可行的，但是，為了這個小字型，用得著這麼複雜的【計算字型大小】-【通過字型大小與 label 高度計算偏移量】-【用到這個字型的 label 統一換成 XXLabel 】流程嗎？

萬一哪天設計師說：來，我們們來個富文字，中間這幾個字用 DINCondensedC 字型，兩邊的字用 system 字型，那你不是要哭了？

結論：不可行

2.3 程式解決不了，那就用人解決吧

讓我們找到可愛的設計師，請他喝個下午茶，搓頓不錯的晚飯，帶他做個大保健，然後和他說：兄弟這個UI圖可以換個字型嗎... 算了成本有點高。

結論：不可行

2.4 可否從字型入手，自己修改字型？

既然字型有點不太正常，那麼我們只能使出大招：自己動手修改這個字型。據說有一款 App：Glyphs 對於製作/修改字型來說，很強大！然後讓我們好好下載，靜靜等待吧。下載完畢開啟這個【PT DIN Condensed Cyrillic.ttf】字型檔案，沒想到這個軟體還收費，只能試用幾天。試用就使用吧，但是，這個字型裡的每個字元我都要一個一個去改？作為程式設計師，不能忍！

結論：不可行

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】字型偏上的問題，因此，讓我們來調節調節 ascender 這個屬性，將它從700改為900，然後儲存檔案。

3.4 將修改完的檔案注入原 ttf 檔案

開啟終端，輸入：ftxdumperfuser -t hhea -A f PT\ DIN\ Condensed\ Cyrillic.ttf，注意這裡 -A 後面的 d 已經換成了 f ，回車。

3.5 替換原工程中的字型檔案

切回我們的工程，替換原字型檔案，Run 一下：

修改後的字型

問題已解決！

4. Demo地址

點選這裡直達倉庫

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

歡迎品嚐~

相關文章