CSS 和字体大小

引言

这种情况一再发生。一位平面设计师制作了他或她炫酷的新布局，并对字体大小进行了完美的调整。然后，这位设计师尝试在他们的浏览器中更改字体大小，令他或她沮丧的是，事情崩溃了。精心调整大小的表格溢出，看起来有所不同，并且总的来说，这位设计师会咒骂字体大小更改功能。

解决这个问题的一种方法是固定字体大小，使浏览器无法更改它们。这种方法的优点是它似乎解决了问题，并且布局保持静态，即使使用了那个讨厌的字体更改功能。设计受到用户的保护，用户根本不知道什么是好的设计！

问题出在哪里？

就 HTML 和网络而言，以这种方式固定字体是一种黑客行为。这是对问题的非优雅解决方案，而且这还不是全部。这种方法正在剥夺大量潜在客户/访问者的权利。设计师正在阻止使用不同默认类型渲染系统的平台，如 Mac，当然也干扰了残疾访问者以舒适的文本大小阅读的能力。使用高分辨率的访问者通常希望将更多像素用于字体渲染，但不能，因为设计师没有想到任何人会永远希望他完美的设计发生变化。相反，这位设计师将这些用户锁定在字体大小仅为一两毫米的字体大小中，当字体为 7pt 且显示器为 1600x1200 或更高时。显然，应该解决这个问题。

那么，真正的答案是什么呢？

示例区域

请注意，此框中的所有内容都会在您更改字体大小时进行缩放。边框、图像和所有文本。浏览器可以选择他们喜欢的字体大小，并且该框的内容看起来几乎完全一样。

一个更好的解决方案是在 CSS 规范中使用 EM 单位，大多数浏览器都很好地支持它，用于定位和调整大小。

EM 应该始终是相同的相对大小，因为它们被定义为当前字体中字母“m”的宽度。当前字体始终是 HTML DOM 中父对象使用的字体，如果未指定则为默认字体大小。如果您使用默认字体大小，那么当用户在浏览器中更改字体大小时，通过 EM 定义的所有对象都会以完全成比例的方式进行缩放，因为您的字体更改命令会导致文档默认字体中字母“m”的大小发生变化。您可以通过 CSS 用 EM 定义任何 HTML 元素。

那么这解决了什么问题？好吧，如果设计师在网络上采用可变字体大小，他们的设计不仅会更强大，而且它将更成功地在平台和分辨率之间过渡。一旦您的页面使用这种方法，您的访问者将不再对固定的字体大小感到沮丧，为我们所有人铺平道路，创建一个更灵活、更易于使用的网络。

有什么陷阱？

EM - 正如您所记得的那样 - 被定义为父对象字体中字母“m”的宽度。父对象可以根据点、像素或其他不可更改的单位来定义，因此 EM 的大部分功能都丢失了。它只是说“将此字体放大 1.5 倍”的一种花哨方式。这会导致事情变得奇怪，尤其是在 width:1em 将使用文档默认字体，而 font-size:1em 将使用“父对象字体”方法的情况下。这意味着您无法完美缩放对象，就像在 PDF 中一样，如果您不小心，事情会很快失控。

PDF 风格的缩放所需的，是一个全局的 EM 风格的单位，它只通过用户的浏览器字体大小命令来调整大小，而不受父对象的影响。使用此单位，我们可以构建一个可以像 HTML 一样使用浏览器宽度进行重排的页面，但可以根据用户的喜好进行缩放。图像和其他对象都会完美地调整大小，并且打印输出也会显得完美。

结论

那么，在得到这种“PDF 风格”的缩放之前，我们应该怎么做？我们可以使用固定大小的字体，就像今天大多数人所做的那样。这些固定大小的页面肯定会按照设计师的意图呈现，但是考虑到当前的网络状态，这种页面设计风格合适吗？希望您会同意，一个好的设计应该补充用于传达它的媒介，而不是试图通过大小限制技巧和其他精心设计的黑客攻击来与之抗争。