CSS字体大小：权威指南

CSS字体的大小听起来应该很容易。 直到尝试为止。 许多开发商使用这种力量。 他们修改了font-size属性，直到看起来正确为止，只是发现它在另一个浏览器中有所不同。 一点理解可以大有帮助...

字体大小属性

可以为任何HTML标记设置font-size属性（即使它通常不包含br类的文本内容）。 可以为它分配各种绝对，相对或长度大小参数。

元素将继承其父级的字体大小，除非您覆盖它。 当您指定相对大小时，这尤其重要。

绝对字体大小关键字

有几个绝对的字体大小关键字。 字体大小由浏览器预设确定，该元素将不会继承其父元素的大小。

• 字号：xx-小；
• 字号：x-small；
• 字号：小；
• 字号：中等；
• 字体大小：大；
• 字号：x-large；
• 字号：xx-large；

尽管大多数浏览器都支持这些关键字，但实际大小会有所不同。 它们是相当粗略的字体大小调整方法，大多数开发人员通常避免使用它们。

相对字体大小关键字

有两个相对的字体大小关键字。 字体根据其父元素的大小设置：

• 字体大小：较小；
• 字体大小：更大；

例如，如果父级的字体大小为“中”，则值“更大”会将元素设置为“大”。 通常，其他字体单位的更改系数约为1.2，但是同样，没有标准，浏览器结果也会有所不同。

绝对长度

可以为font-size属性指定绝对长度：

• mm ：毫米，例如10mm。
• cm ：厘米，例如1cm（= 10mm）。
• 在 ：英寸，例如0.39in（〜= 10mm）的。
• pt ：点，通常将1pt假定为1/72英寸，例如12pt。
• pc ：pica，其中1pc是12pt
• px ：像素，例如14px。

通常，所有这些度量单位都有问题。 对于基于屏幕的介质，毫米，厘米和英寸是不准确的。 由于系统可以使用不同的dpi设置，因此点数和异食癖不可靠。 像素似乎是最合适的，但由于无法在IE中调整文本大小，因此可能导致可访问性问题。

相对长度

可以为font-size属性分配一个相对于其父级字体大小的单位：

• em ：1em等于当前字体大小，因此2em的大小是当前字体大小的两倍。
• ％ ：100％等于当前字体大小，所以200％是当前字体大小的两倍。
• ex ：1ex等于当前字体中字母'x'的高度。

很少有开发人员使用“ ex”，但是在某些需要细粒度字体大小的情况下（例如1ex而不是0.525em），它可能会很有用。

百分比和'em'大小是等效的，例如50％= 0.5em，100％= 1em，120％= 1.2em等。某些浏览器表现出细微的差异，但这很少是主要问题。 如果要保存每个字节，则可以选择最短的定义，即50％小于0.5em，1em小于100％。

文字大小调整和页面缩放

这是增加复杂性的地方。大多数浏览器允许用户：

1. 增大或减小基本文本大小（图像尺寸不变）
2. 放大或缩小页面，以便所有文本和图形都相应更改，或者
3. 允许文本大小调整和页面缩放。

只是为了使事情更加复杂，Internet Explorer不允许在字体大小以像素（px）为单位的元素上调整文本大小。

如果您是从打印背景移至Web的设计师，那么令人感到困惑的是为用户提供了如此多的功能。 用户放大200％但将文本大小减小到50％可能会破坏您的设计。 而且-不-您无法采取任何措施来阻止这种情况。 你也不应该

CSS字体大小建议

普遍的共识是，在大多数情况下，“ em”或“％”是最佳解决方案。 字体可以相对于彼此精细缩放，并且支持浏览器文本大小调整。 我还建议在body标签上使用百分比font-size ； 在某些较旧的浏览器中，它可以更好地调整文本大小。

在开发网站时，我还会建议其他一些建议：

1. 在测试之前，请在所有浏览器中将字体大小和页面缩放重置为默认值（这让我有些困惑了！）
2. 在各种浏览器中尝试合理地结合使用文本大小调整和页面缩放，以确保文本保持可读性。

字体大小是否曾经给您带来问题？ 您还有其他提示吗？

From: https://www.sitepoint.com/css-font-sizing-tutorial/