文件名 如何下載使用 文件大小 提取碼 下載來源
思源黑體優化版376.05MBarya 點此復制 登錄下載

思源黑體優化版發布!完美解決行高和字體偏下問題(已打包)

經常做安卓端設計的朋友應該經常被一個問題困擾,那就是思源黑體的行高特別高,而且文字整體偏下。這會導致在 UI 設計軟件中使用居中操作后,視覺上總是偏下的。

但是這一問題 Adobe 官方一直未曾解決,甚至不認為這是問題。

思源黑體和更多黑體字下載:

作為一名從業多年的非著名視覺設計師,這種事情是不能忍的。如下圖所示,雖然按鈕文本在布局中是居中的,但是因為行高的存在,以及思源黑體文本本身偏下的問題,此時文本整體是偏下的。

思源黑體優化版發布!完美解決行高和字體偏下問題(已打包)

當前因為硬件平臺以及軟件適配等原因。不同公司對行高的定義是不同的,有 1.4 倍、1.5 倍,以及一些更復雜的計算方式。而思源黑體因為整體偏下以及原本默認行高偏高,自定義行高后在 figma 和 MasterGo 等設計軟件中,字體顯示更加離譜,完全失去了平衡。

那究竟有什么好的解決方案呢?

關于這個問題我跟國內多家設計軟件提了建議,但是目前還沒有人著手優化。于是便自己尋找各種解決方案,終于功夫不負有心人。讓我發現了一款基于思源黑體優化的字體——夢源黑體。

此字體為免費開源可商用:https://github.com/Pal3love/dream-han-cjk

為啥叫夢源黑體呢?是因為此字體是一位叫做夢回瓊華的軟件開發工程師在思源黑體可變版的基礎上修改的。

夢源黑體將可變版思源字體的大量中間字重實例化為傳統單字重字體,合并了重疊的曲線輪廓,在保證最大兼容性的前提下,提供更加細膩、豐富的字重選擇。此外,本項目修復了思源系列廣泛存在的 Adobe 行高過大問題。本系列字體的其他功能(如字形、豎排、kerning、多語言、異體字、曲線精度等)與思源系列保持完全一致,未做任何修改。(引自作者原文: https://zhuanlan.zhihu.com/p/480219182

通過下圖,我們可以發現在相同字號和行高的前提下,思源黑體、夢源黑體和蘋方三款字體的文字布局,蘋方始終可以保持居中位置,夢源黑體在一般常用字號大小時表現優異,能夠保持居中。在字體過大的時候會出現一點偏下,在使用 64 號字時,上下間距約相差 3px,完全可以滿足日常使用了。而思源黑體就顯得慘不忍睹了,基本 10 號字以上就會出現明顯偏下;

思源黑體優化版發布!完美解決行高和字體偏下問題(已打包)

既然夢源黑體能夠解決思源黑體存在的問題,那么直接替換是不是就可以了呢?理論上是可行的,但是還會存在一些問題,因為夢源黑體的原作者是基于可變版思源黑體來優化的,其字重有 27 個之多。而思源黑體標準版則只有 7 種,從細到粗分別是 ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy;

思源黑體優化版發布!完美解決行高和字體偏下問題(已打包)

所以要想使用夢源黑體,就需要和標準版的思源黑體字重一一對應,通過對比篩選出其對應關系為:ExtraLight=W1、Light=W6、Normal=W12、Regular=W13、Medium=W17、Bold=W22、Heavy=W27;

所以如果你只是想解決字體行高和不居中的問題使用上述字體字重即可,在 UI 設計軟件中也可以自定義行高,文本會使用保持上下居中;

而筆者作為強迫癥,又對夢源黑體進行了如下修改,首先將字體名稱和字重從夢源黑體改為了對應的思源黑體及字重。

同時針對針對 Android 端中文使用思源黑體,英文使用 Robto 字體,排版時需要來回切換兩種字體的問題,將思源黑體中 95 個英文字符替換為了 Roboto 字體。使用修改后的字體你能夠得到的效果如下:

思源黑體優化版發布!完美解決行高和字體偏下問題(已打包)

因為此款字體是基于思源黑體可變版優化的,所以和思源黑體標準版字形和字重有細微差異,請知悉,同時本人已聯系原作者,希望不久后基于標準版思源黑體優化的版本能夠和大家見面。

相信此款字體能夠解決廣大設計師在工作中的一些困擾,最后向夢源黑體的作者致敬(有條件的朋友可以去 github 給作者點一個免費的小心心)。有需要的小伙伴可以附件下載夢源黑體原版以及經過本人改造過的思源黑體文件。(僅做交流使用,不作任何商業用途)

歡迎關注作者微信公眾號:「動效研究社」

思源黑體優化版發布!完美解決行高和字體偏下問題(已打包)

文件名 如何下載使用 文件大小 提取碼 下載來源
思源黑體優化版376.05MBarya 點此復制 登錄下載
收藏 148
點贊 92

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。