形容字体大小的单位

在 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？这涉及到一个锯齿的问题，特别是在早期的显示器中，往往不能很好的处理文字的锯齿问题，而使用单数的像素，极有可能造成锯齿，所以默认的通常使用偶数大小。

字体的颜色选择

字体的颜色选择同样是一个重要的细节，但是涉及到配色了，已经超出本文要讨论的范围，所以在这里，我只好简单的说一下有关网页中字体颜色的禁忌。

字体的颜色要朴素、正常

什么叫朴素正常？通常来说，文章都是白底黑字，黑色的。所以网页中的文字，通常使用黑色，或者浅灰色，这样更加符合大众的口味。如果不是一些很有创意的设计，请不要随便的使用颜色。就像 我爱水煮鱼 博客里面的一篇文章

如果我为它加上蓝色，你会怎么想？

颜色要与背景有一定的对比度

低对比度，容易导致字体看不清楚。所以要用高对比度的颜色，例如白底黑字，黑底白字等。不信看下图：

如果你在看一篇文章，字体的颜色是上图中，最下面的那个，你还会再看下去吗？

避免特殊颜色

这里要避免的一些特殊颜色，是指网页中的一些默认颜色。特别是蓝色，因为蓝色代表着网页中的超链接，如果网页中有一段蓝色的文字，会让人误以为是可以点击的超链接。所以这种颜色要尽量避免。但是有些时候在设计中，必须要用到这种颜色的设计，所以也有一些其他的方法来解决这个问题。

例如潜行者m博客的 Qetro 主题，采用了蓝色调，在正文排版布局的时候思考过关于加粗文字的样式。如果使用常规的粗体黑色来说，较多的加粗内容，会导致页面文字的混乱。加粗的目的是为了醒目，告诉浏览者这是段重要的文字。所以我对文字添加蓝色处理。但是这个蓝色恰巧就跟超链接的默认样式颜色相同。非常容易让人迷惑，于是我将超链接的样式带有默认的下划线。

当用户看到蓝色的时候，可能会试图放在上面看一下，结果无法点击也没有变成手指。再往下拉，看到超链接的时候，一眼就可以看出下划线是可以点击的超链接。这也是一种还不错的折中方法。

与字体有关的 CSS 属性

与字体有关的 CSS 属性，通常有以下几个：font-family、font-style、font-weight、font-size、line-height、letter-spacing、word-spacing、text-align、text-decoration。

font-family：用于定义字体，上面有演示不多说。更详细的资料请看：font-family。

font-style：用于定义字体的样式，包括正常、斜体、倾斜等，对应的属性值为：normal – 文本正常显示、italic – 文本斜体显示、oblique – 文本倾斜显示。

font-weight：用于定义文字的粗细，详细的属性值请看：font-weight。

font-size：设置字体大小，不再赘述。

line-height：用于设置文字中的行间距，合适的行间距对用户阅读带来良好体验。同时还可以用于垂直布局单行文字。

letter-spacing：设置文字之间的字间距，使文字之间的距离增大或者减小。

word-spacing：用于调整单词的间距。

text-align：用来对齐文字，例如左对齐、右对齐、居中对齐等。

text-decoration：用来修饰一段文本，例如添加下划线等。常对 a 标签使用这个属性消除其默认的下划线。

上面是与字体相关，比较常用的 CSS 属性，还有其他更加具体的，可以参考网上的资料，推荐 W3school 上面的有关字体的资