Android系統字體規范與應用探索

我們在做Android移動APP設計的時候，字號的選擇也是很讓人頭疼，今天整理了一份有關Android系統字體規范，主要從以下幾個方面：方案。

1. 移動設計中與字號有關的基本概念

• px：Pixels即像素，基本原色素及其灰度的基本編碼。
• DPI：dots per inch，是印刷上的記量單位，意思是每個英寸上，所能印刷的網點數。
• PPI：pixels per inch 數字影像的解析度，意思是每英寸所擁有的像素數，即像素密度。
• PPI = √（長度像素數² + 寬度像素數²） / 屏幕對角線英寸數
• pt：Point，磅因，國際通行的印刷單位，是一個自然界標准的長度單位。
  

  inch = 2.54cm = 25.4 mm = 72pt， 1pt≈0.35mm
  Photoshop裡的字體單位pt和point不一樣。在Photoshop裡，同樣是10pt的字，只要變換字體，字的高度就會變化。

• dp：Density-independent pixels，以160PPI屏幕為標准，則1dp=1px
• dp和px的換算公式 ：dp*ppi/160 = px
• sp：Scale-independent pixels.安卓的字體單位，以160PPI屏幕為標准，當字體大小為 100%時， 1sp=1px
• sp 與 px 的換算公式：sp*ppi/160 = px

2. Android 系統默認字體 Rotobo,限定使用以下字號

3. Android 字體單位 sp 與 px 的換算

• PPI = √（長度像素數² + 寬度像素數²） / 屏幕對角線英寸數
• sp與px的換算公式：sp*ppi/160 = px

以三星Note2為例，PPI = √（1280² + 720²） / 5.5=267

經測量，三星Note2的字體高度確實如此，見下圖：

4. 規范字號的意義

保證相同字號的字在不同PPI屏幕上顯示的物理高度一致，下面來驗證一下。

• 設定 PPI為 267 時，高度18sp（即 30px）的字的物理高度為 X，則：
  一英寸裡的像素數 267 / 一英寸裡的毫米數 25.4mm = 30 / X
  X ≈ 2.86mm
• 設定 PPI為 160 時，高度18sp（即 18px）的字的物理高度為 Y，則：
  一英寸裡的像素數 160 / 一英寸裡的毫米數 25.4mm = 18 / Y
  Y ≈ 2.86mm

綜上，X = Y，這就證明了同為18sp的字在 PPI分別為 267 和 160 時，顯示的物理高度都是 2.86mm

5. 印刷業的規范字號的用法

看書的時候眼睛距離書本的最佳距離為 33cm，書本的閱讀距離比較接近於手機的閱讀距離，所以我們來參考下書本上印刷文字的規范。

印刷業已經有成熟的行業字號標准，如下表所示：

其中正文常用的字號是六號（7.5p）、小五號（9p）、五號（10.5p），如下表所示：

6. Android 規范字號的近似用法

通過計算出 Android規范字號的物理高度，找到每個字號最接近的印刷字號：

再根據印刷字號的用途，近似得出Android 規范字號的用法

7. 如何向前端輸出？

第一步：將sp 換算成px。但是px隨PPI 變化而變化，這一點可以從sp 與px的換算公式“sp*ppi/160 = px ”看出來。我們不能算出所有的情況，所以只計算首選需要適配的ppi 對應的像素高度。

第二步：把算好的像素高度和換算公式“ sp * ppi/160 = px ”同時輸出給前端，這樣以後再換ppi，前端可以自動計算。另外，前端代碼裡定義字體高度用的也是px，所以設計師向前端輸出以px計算的字號尺寸是非常合適的。例如：

8. 如何在photoshop裡選擇字號？

上文中，我們已經算出了字體像素高度，把這些像素高度畫到ps 裡，
再把你要使用的字體調到這樣的像素高度，得出photoshop 裡對應的字號，用於設計。也就是說Photoshop 裡的字號都需要根據實際情況，手動調出來，沒有捷徑。例如ppi 為240 時，對應的像素高度和字體字號如下圖所示：

如果ppi 變化，上面的圖就不能用了，又要重新算，比較勞神費力，但我目前還沒有更好的辦法，歡迎大家拍磚，我會積極采納意見，優化方案。

參考文獻：
1.Android 設計指南：
http://www.sunjw.us/adchs/style/typography.html

2.維基百科：點（印刷）
http://zh.wikipedia.org/wiki/%E7%82%B9_(%E5%8D%B0%E5%88%B7

3.百度文庫《印刷文字的字體與字號規定》
http://wenku.baidu.com/view/c3f12af9aef8941ea76e05f2.html