一、字体的大小选择
形容字体大小的单位
在 CSS 中,最常用的描述字体大小的单位有两个:em、px。通常认为 em 为相对大小单位,px 为绝对大小单位。但从实际应用中来讲,px 像素其实也是一种相对大小单位。例如,在一块15寸分辨率为 800×600 像素的屏幕上,10px 大小的文字,要比一块10寸分辨率 1024×768 像素的屏幕上的 10px 大小的文字显得更大一些。下面来说一下它们的区别和用法等。
px:像素单位,10px 表示10个像素大小,在现在的网页设计中,常被用来表示字体大小。很方便很直观,但是有一些弊端。对于可用性不太友好,因为是“绝对”单位,所以有些浏览器(早期)的字体放大缩小功能失效。浏览器的默认字体大小为 16px ,早期的网页,由于屏幕分辨率比较低,通常采用12px作为网页正文的标准字体大小。但是在现在,感觉有点偏小,比较长的文章来说,浏览者看起来费劲。现在我更主张使用 14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px 作为偏小字体比较合适。
em:相对大小,它表示的字体大小不固定,根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为 16px,如果你对一段文字指定 1em,那么表现出来的就是 16px大小,2em 就是 32px 大小。相对大小单位有很广泛的用途,由于它的相对性,所以对跨平台跨设备的字体大小处理上有得天独厚的优势,同时对于响应式的布局设计也有很大的帮助。但是缺点很明显,你无法直观的看到大小,而且对于不同的大小,你需要精确的计算。
二、字体实际表现出来的大小
上面只是说了两种形容字体大小的单位,但实际上表现出来的字体大小,并非简单的单位前面的数值。除了数值之外,潜行者m 个人认为还跟 设备 和 视距 有关。
设备就是指显示设备的分辨率及屏幕大小,跟前面解释 px 单位的相对性相同,如果在一块非常大的分辨率非常低的屏幕(像广场电子屏),即使很小的像素,也会展示出很大的字。这也就是为什么早期的 800×600 像素横行的时候,大家都是用12px大小的原因。因为显示的文字已经够大了。
视距就是指浏览者看文字的距离。很明显的道理,眼睛距离屏幕越远,看起来上面的文字就变小了。
所以在选择网页中字体大小的时候,还需要考虑你的用户的实际使用习惯。同一个网页,在笔记本上和在手机上使用的时候,字体大小就不应该相同,因为电脑屏幕大分辨率高,而且视距通常比较近而且固定,手机等屏幕小分辨率较低,视距更近(大家都喜欢躺着或者趴着玩手机啦),所以这些都要考虑,才能得到一个合理的大小。
三、为什么是偶数字体大小
通过上面的单位介绍,对于 px 单位中,我举得例子都是 12px、14px、16px、18px等等,为啥不是11px、15px?这涉及到一个锯齿的问题,特别是在早期的显示器中,往往不能很好的处理文字的锯齿问题,而使用单数的像素,极有可能造成锯齿,所以默认的通常使用偶数大小。