Android系统字体规范
我们在做Android移动APP设计的时候,字号的选择也是很让人头疼,转载一份有关Android系统字体规范,如果在做Android项目的用户应该看看,如果有任何建议欢迎在留言处与我们交流探讨。
主要从以下几点做了分析:
- 移动设计中与字号有关的基本概念
- Android系统默认字体及字号
- Android字体单位sp与px的换算
- 规范字号的意义
- 印刷业的规范字号的用法
- Android规范字号的近似用法
- 如何向前端输出?
- 如何在photoshop里选择字号?
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
Android系统字体规范的更多相关文章
- 怎样改动android系统字体大小
改动字体大小的方法是运用到一个ActivityManagerNative类 首先先在代码宣告 private Configuration mconfig = new Configuration(); ...
- Android 系统字体和颜色样式
Android 字体和颜色 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小 ...
- Android 更换系统字体......
Android 更换系统字体...... 原文:http://vision-apps.blogspot.hk/2012/02/android-better-way-to-apply-custom-fo ...
- [Android] 字体使用dp单位避免设置系统字体大小对排版的影响
[Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高 ...
- Android: 设置 app 字体大小不跟随系统字体调整而变化
在做 app 内字体大小的需求,类似于 微信中设置字体大小. 那么就需要 app 不跟随系统字体大小调整而变化,找到了两个方法. 方法1: 重写 getResource() 方法,修改 configu ...
- <转>Android APP字体大小,不随系统的字体大小变化而变化的方法
从android4.0起系统设置的”显示“提供设置字体大小的选项.这个设置直接会影响到所有sp为单位的字体适配,所以很多app在设置了系统字体后瞬间变得面目全非.下面是解决方案 Resources r ...
- android系统架构解析
以上是我在这个课题下的一些参考博客或者网页链接.里面有对于android架构的一些较好的分析理解,接下来是楼主在阅读后自己的一些整理. Android采用层次化系统架构,官方公布的标准架构如下图所示. ...
- Android开发代码规范(转)
Android开发代码规范 1.命名基本原则 在面向对象编程中,对于类,对象,方法,变量等方面的命名是非常有技巧的.比如,大小写的区分,使用不同字母开头等等.但究其本,追其源,在为一个资源其名称 ...
- Android 随想录之 Android 系统架构
应用层(Application) Android 的应用层由运行在 Android 设备上的所有应用程序共同构成(系统预装程序以及第三方应用程序). 系统预装应用程序包含拨号软件.短信.联系人.邮件客 ...
随机推荐
- 数组练习:各种数组方法的使用&&事件练习:封装兼容性添加、删除事件的函数&&星级评分系统
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- RFS 理解
1.背景 网卡接收一个数据包的情况下,会经过三个阶段: - 网卡产生硬件中断通知CPU有包到达 - 通过软中断处理此数据包 - 在用户态程序处理此数据包 在SMP体系下,这三个阶段有可能在3个 ...
- 【Excle数据透视表】如何为数据透视表应用样式
如下数据透视表样例,如何为该数据透视表设置样式呢? 步骤 单击数据透视表区域的任意单元格→数据透视表工具→设计→数据透视表样式→打开下拉箭头即可任意选择
- UINavigationController改变动画效果
@interface UINavigationController (CustomTransition) - (void) pushWithCustomAnimation:(UIViewControl ...
- 人不在囧途 便携式3G上网设备+套餐推介
来源: http://network.pconline.com.cn/317/3174920_all.html [PConline资讯]过年回家,本该是再高兴不过的事,可一想到要在路上颠簸数十个小时, ...
- 【0】按照Django官网:实现第一个django app 安装必要的工具/模块
1.环境配置: (1)Install Setuptools¶ To install Python packages on your computer, Setuptools is needed. Do ...
- 手动建立storybook
1. Add @storybook/react npm i --save-dev @storybook/react 2. Add react, react-dom, and babel-core np ...
- laravel数据库——迁移
1.简介 迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和Laravel的结构构建器结对从而可以很容易地构建应用的数据库表结构. Laravel的Schema门面提 ...
- 【已解决】iView-admin Editor 组件 绑定默认值问题
iView-admin Editor 组件 绑定默认值问题 发现 editor 组件,设置v-model 后, 修改 v-model 数据, editor组件没有自动渲染,需要手动设置渲染 this ...
- linux之ftp命令详解
我们在使用ftp客户端访问到ftp服务器之后,往往需要进行相关操作,比如从远程机器上下载文件,或者将文件传输到远程机器上.需要使用ftp的相关命令,本文讲述了ftp常用的一些操作. 方法/步骤 ...