§ ITPOW >> 文档 >> XHTML

作者：翻译：Y 来源：ITPOW（原创） 日期：2007-1-16

原文：http://www.w3.org/QA/Tips/font-size（可能是英文）

在设计者间必定的趋势是：相信小的文字将给网页更流利的展现，并且在每一个网页实际内容中提供了更多的空白，这往往导致不明原因地使用小字体。

不幸的是，使用不同的平台访问网页时却表现得不是很好，从拥有精小屏幕的便携式设备到连接电脑的投影设备，并且即使是一个特定的平台，文字设置也是多样的。

这个问题有一个基本的可用性和易用性原则：一个好的设计应该是不需要用户增大或减少文字大小，看起来就会很舒适。

---

忘掉 <font>，使用 CSS

在网页上设置文字大小的合适的、现代的做法是使用层叠样式表单，这里强烈推荐不使用 HTML 上的 <font> 标签，因为 CSS 具有更高的适用性，更容易节省带宽。本文不讨论 CSS 与 <font> 标签的优缺点，如果你需要关于它们的更多细节可以使用网页搜索引擎寻找更多相关信息……我们重点讨论 CSS 创建易读网页的好处。

---

使用 CSS 的 font 属性的好处

这里是使用 CSS 的 font 属性的一些创建易读性网页的规则。

size：适应用户的参数设置，避免内容文字太小。

• 作为文档的基础文字大小，1em（或 100%）同将文字大小设置为用户的参数设置是一个道理。使用这个作为你的文字大小的基础，不应该设置更小的基础文字大小。
• 避免将小于 1em 的大小作为网页文字，除非是版本声明之类的文字，这类文字为了实现较好的打印效果，可以做得小一些。

Units：避免屏幕显示中的绝对长度问题

• 不要在为屏幕设置的样式表中对 font-size 使用 pt，或其它绝对长度单位。如果使用绝对的长度单位，则在不同的浏览器中会出现大小不一致的现象，并且不能在客户端（比如：浏览器）调节。我们应该在在具有固定样式或不知道物理属性（比如：打印）的媒介上使用这些绝对长度单位。
• 使用相对长度单位，比如 percent 或 em（更好）。
• 更好的做法，如果在文档中设置了基础文字大小，在为文档的某一部分设置文字大小时使用绝对大小（xx-small | x-small | small | medium | large | x-large | xx-large ]）或相对大小（[ larger | smaller ]）。

易读的 font-family

如果使用较小的 font-size，应该使用一个具有高方位值（关于方位值请参见 CSS2 文档中的 font-size-adjust 一节）（译者注：方位值等于 font-size 除以 x-height）的可读性 font-family，这样在这样小的字体下具有较高的可读性。