首先在开头再次强调Phonegap移动开发的口号:Once code, run everywhere.
移动开发的界面布局中,字体的设计容易遇到两大难题.
1.字体需要根据不同的设备尺寸进行调整.
2.移动设备的尺寸较小,字体的变化会很容易影响到布局.
对于这两个问题,通常的解决方案为:
1.利用响应式布局根据设备屏幕分辨率在不同的css中设定特定的font-size(pt或者px)
2.使用百分比来设置字体的font-size(em),然后根据基准字体大小来自动调节所有字体的固定大小.
简单介绍一下:
方案一,
响应布局简单的说,就是使用css3 的@media过滤屏幕尺寸,根据不同的屏幕尺寸为字体设定相应的固定大小. 其缺点在于@media的边界值大多数都是根据一些较为流行的设备(比如IPhone,IPad,Samsung S3等)来进行设定,但是这些边界值实际上并不能以偏概全的准确代表字体在所有尺寸上的体验.移动设备的屏幕分辨率和大小是多种多样的,虽然大多数会和流行的设备的屏幕尺寸相仿,但是当开发完成的App放到一些特定范围内后,固定的font-size很容易产生未知的布局问题(比如尺寸太大造成的换行或者超出容器边界等),从而造成与App整体界面不相符的糟糕体验.这显然违反了我们用Html5+css3的终极目标:Once code, run everywhere.
方案二,
这曾经被笔者认为是在移动中布局及设置字体的一个捷径.
通常分为两步:(1)在body中设置一个基准字体大小,比如body{font-size:16px;}或者body{font-size:*%;} (2)界面元素中字体的font-size全部设置为em(即相对于基准尺寸的比例,对em不熟悉的同学可以google一下).
其实这里,我们还是会借用到响应式布局的@media, 根据边界值设定基准字体大小(边界值设定可以参考方案一). 与方案一所不同的是,其他所有的字体都是一个参照基准值的比例,不用设置特定的固定大小.当设备发生变化时,所有的字体根据设备的分辨率过滤出的基准值和设定的比例做响应的调整.
但是现实往往是:你看到一个美女,初步认识的时候觉得她简直就是女神. 但当她成为你的女朋友后,面对各种各样的考验后你才会发现,现实都是很骨感的.
我曾经在一个Phonegap的项目中,大面积的使用em来设置字体和元素比例,当然App在面对不同的设备时,尺寸会相应变化.
但是有一个比较现实的问题是,现在很多用户都会用到平板,其尺寸较大,如果尺寸越大App的元素越大,岂不是要乱套?
你也许会说,"我为@media设置一个固定上限边界值,比如最大的分辨率屏幕宽度是1280,超过1280的基准都设为62.5%(这里套一句题外话,62.5%是根据em进行字体设定的一个黄金比例.当你在body中设置font-size为62.5%时,在需要设置em时,可以直接按照原型切图时,psd上的原始字体大小除以10来设定. 比如psd中某个元素的字体时17px,那么在css中的em就可以设置为1.7em)".
你的想法是正确的,但是客户的想法是难以捉摸的,他可能会说"我需要App里面的按钮和Label大小是一个固定的高度". 这个时候使用em进行字体设置几乎会对很多地方产生较大的影响. 试想一个按钮,边框是一个固定大小的,但是内部字体的尺寸却在根据不同设备变化,这显然是比较糟糕的.
这个时候,我们还是会需要固定的字体大小(px,pt)来充当救世主.
笔者的方案最终回到了最原始的起点:
(1)为元素设定固定的高度.
(2)为字体设定固定值.
但是这两点有两个原则作为铺垫
(1)布局的时候,间隔尽量使用百分比.
这样虽然会改变元素间距,但是整体布局不至于出现错位等比较难以接受的情况.
(2)在设置固定大小时,以屏幕尺寸相对较小的设备进行测试.
字体往往会对屏幕较小的移动设备产生影响. 另外,大多数人在使用平板时,实际上大多数的操作都是与手机等小屏幕设备一致的,只是滑动的空间和可见度更大.
当一个App的元素间隔产生变化,但是各个元素的大小在不同设备上显示一致,实际上是用户体验最好,最容易接受的.
写到这里,大家可能对在移动开发中设置字体有了一定理解,欢迎各位同学提出想法,交流讨论.