微信号:bjsxt-Android

介绍:北京尚学堂科技有限公司是一家从事Java、iOS、大数据、Android、web/HTML5前端、UI、软件测试开发、培训、咨询为一体的软件公司.公司由海外留学人员和国内IT精英人士创建,主要成员均拥有硕士以上学位,毕业于国...

Android系统字体规范与应用探索

2016-05-31 10:56 尚学堂Android
点击「箭头所指处」可快速关注
微信号: 尚学堂Android





1. 移动设计中与字号有关的基本概念

  • pxPixels即像素,基本原色素及其灰度的基本编码。


  • DPIdots per inch,是印刷上的记量单位,意思是每个英寸上,所能印刷的网点数。


  • PPIpixels 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 = p



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 变化,上面的图就不能用了,又要重新算,比较劳神费力。

本文转载自设计达人



微信:尚学堂Android

❶ 实战化教学第一品牌

❷ 更专业的IT培训机构

❸ 长按右侧二维码关注

点击“阅读原文”关注“尚学堂Android”回复消息“要课程”课程礼包全都有!


 
尚学堂Android 更多文章 一个Android程序员的自我修炼 Android开发过程 “八亿件衬衫换架飞机”,中国制造还是廉价代名词吗 | 品牌新事 Google 昨晚发布的这些 App,让我们提前看到未来 「谷歌教父」谢尔盖·布林,世界第一互联网巨头的创新原力!
猜您喜欢 PM QoS 和 DVFS Android ListView工作原理完全解析,带你从源码的角度彻底理解(郭林) JavaScript:svg标签是否影响了解码顺序? 你知道你的电脑 1 秒钟能做多少事情吗? 使用Visual Studio Code开发AngularJS应用