在 CSS 中使用相对字体大小真的有啥意义吗？

Posted 2023-03-15

【中文标题】在 CSS 中使用相对字体大小真的有啥意义吗？

【英文标题】：Is there really any point to using relative font sizing in CSS?在 CSS 中使用相对字体大小真的有什么意义吗？

【发布时间】：2010-09-22 12:52:48

【问题描述】：

我已经阅读了很多关于使用相对或绝对字体大小调整大小的利弊。固定尺寸不会放大 IE6，但现在这不是什么大问题。可访问性很重要，但我认为所有优秀的可访问性软件都是为解决这些问题而构建的？

我想这主要取决于您是否希望能够使用一条规则（即您设置的默认字体大小）更改所有字体大小，或者您是否希望能够在不影响嵌套元素的情况下更改某处的字体大小（这是最让我沮丧的事情！）。

有人有什么建议吗？

【参考方案1】：

根据YUI Font CSS，

始终使用百分比作为单位 因为它们渲染得更一致 比 ems，因为它们允许 用户启动的大小调整（不像 像素）。

当它们是像 YUI 这样的框架的一部分时，相对字体大小可以很好地工作。特别是因为它们规范了字体在浏览器中的工作方式。

就个人而言，我确实偶尔会输入绝对像素，但通常只用于必须以某种方式与其他设计元素（如菜单）在大小上匹配的文本。

当您将 % 分配给某个元素，然后将不同的 % 分配给包含的元素时，% 的东西确实会崩溃。但这是我发现的唯一真正的问题。

【讨论】：

是的，菜单示例正是我所想的情况。如果您决定让父菜单项变大，则需要重新计算百分比以使子项再次变小。

【参考方案2】：

正如这篇CSS font size 文章中所述：

理想吗？最好的计量单位是NONE！让用户代理根据用户的偏好确定显示 - 但是！我们也知道，对于大多数设计，这不是一个非常实用的方法。亲身？我更喜欢 .em 和 .px 的“混合搭配”灵活性——随着用户代理变得更加“用户友好”，设计师的尺寸调整将不会像现在这样存在潜在问题或争议。

不要忘记虽然相对字体大小可以用于...字体大小以外的其他事情！

css image text wrap css em scale image

【参考方案3】：

除了在 IE6 中调整大小的能力（唉，它仍然是一个非常流行的浏览器），默认情况下，相对字体让您更有可能匹配用户的需求，而无需调整大小（或者知道如何调整，如果我们在这里谈论没有经验的用户）。用户 — 或代表他们的某人 — 可能出于充分的理由（例如视觉障碍）增加了字体大小作为 DPI、操作系统或浏览器自定义，并且通过相对大小，您可以利用该信息对他们有利。

对于必须与其他以像素为单位的页面元素（即图像）匹配大小的文本，使用“px”。对于其余的， '％'。该问题假设使用相对字体大小在某种程度上是困难的；我不这么认为。

通常，您会在正文的“%”中设置一种字体大小，并在其他页面元素上设置一些字体大小，这些元素或多或少比一般正文文本重要。您应该很少有足够的嵌套级别和嵌套的字体大小，以至于您无法轻松跟踪它们。

没有任何关于尺寸相对于其父尺寸的特别难以理解的内容，并且此属性可能很有用：如果您想更改页面或部分页面上的基本字体大小，您可以更改一次，而不必修复包含元素上的每个字体大小声明。

相对的唯一真正困难是当您相对地调整了一个块的大小，但您想将其内部的某些东西调整回原始大小。您可以计算出与父母百分比相反的百分比，但这可能是一个丑陋的数字，如果您不能/不能完全准确地说明它，您可能会得到 1px 的舍入误差。在这种偶尔的情况下，最好退后一步看看选择器，看看您是否不能更有选择地应用尺寸以避免不得不撤消它。

诚然，如果我们有一个只与用户的默认尺寸相关的单位，而不是父尺寸，来解决这样的问题会很好。不幸的是，唯一像这样工作的值是最小/较小/小/中/等。关键字，除了历史浏览器一致性问题之外，还比较粗粒度。

【参考方案4】：

OS X 和 Windows 至少以不同的方式处理 pt 字体大小，因此这肯定是完全不行的。另一方面，不使用相对字体大小有什么好的理由吗？这似乎不是一场双方都有好论据的加权辩论。相反，一方面有几个优点（可能并不总是很明显）。但另一方面，只有明显的优点，稍加探究就会证明毫无价值。¹

实际上，对于绝对字体大小，我只能想到 一个 参数，即通过复制设计软件中使用的字体大小，可以更轻松地为完成的设计实现 CSS。实际上，一致的设计只会使用少数几种不同的字体大小，它们是彼此之间的简单比例（例如 80%），因此可以简单地用em 或% 表示。

---

¹⁾ 你说：

或者您是否希望能够在不影响嵌套元素的情况下更改某处的字体大小

你到底是什么意思？ CSS 的全部意义在于您（通常）更改元素相对于其父元素的属性。为什么这会成为一个问题？

整个辩论有点让人想起“不要使用布局表”的辩论。对于非专业人士来说，这些论点可能看起来很教条²，但无论如何都没有理由不遵循它们。这并不是说要求争论是错误的！但是有太多无意义的违反这条规则。

---

²⁾ 郑重声明，我不是网页设计专业人士。在这里只谈一谈我的技术意见。但这个论点确实与所使用的技术无关。

【参考方案5】：

想想您的父母或祖父母正在查看您的网页，有无双光眼镜（或三光眼镜）。如果他们因为您将所有字体都设置为 8 像素而无法阅读，他们可能会去其他地方。如果他们点击“文本大小 >> 最大”但没有任何反应，他们可能会去其他地方。

鉴于 - 至少在美国 - 许多网络冲浪者都是有时间、金钱和视力下降的老年人，使用 em 作为公共网站的字体似乎有很大的好处 ;-)

【参考方案6】：

唯一有效的重要原因是很多人仍在使用 IE6。只是这个。 在 2008 年底，不再关注 IE6 可能是件好事。但很难忽视IE6。我在意大利的一家大公司担任网页设计师/开发者，我们的许多员工或客户现在正在他们的工作计算机上使用 IE6 浏览互联网。

为什么？他们没有管理员权限，无法在他们的机器上安装任何东西，而且系统管理员总是忙于升级每个办公室的计算机。可能这些人会在需要更换硬盘时升级到 IE7（比如 Firefox 是一个梦想）。

这种事情有可能只发生在意大利吗？但我不会赌这个。

【讨论】：

Firefox 可以安装到用户本地目录中并且可以正常工作。无需管理员权限。

确实如此，但大部分普通用户并不知道 Firefox 的存在。

【参考方案7】：

对字体大小、行高和上/下边距和内边距使用相对单位也可以在用户增加/减小文本大小时保持印刷比例不变。排版和设计人员会欣赏它 =)