【发布时间】：2011-09-04 20:53:37
【问题描述】：
多年来我一直从事 HTML/CSS 方面的工作，但我想澄清一些关于设置字体大小的事情。设置字体的最佳格式是什么？
通常，我一直以百分比设置字体大小，然后使用 em 从那里向上或向下更改。
这是最标准的方法吗？我见过以像素、点为单位声明的字体，以及像“更大”或“更小”这样的相对关键字我已经看到它设置为百分比等。
那么最标准的是什么？最标准的就是最好的吗？有研究支持吗？
谢谢，
【问题讨论】：
【发布时间】：2011-09-04 20:53:37
【问题描述】：
他们都是standard。使用适合您的。
【讨论】：
-
我很欣赏规范的链接 - 这正是我要求研究支持它时所希望的类型。
我在学校学到的如下：
将正文中的字体大小设置为 62.5%：
body {
font-size: 62.5%;
}
然后您可以像使用像素一样使用 em，但除以 10。
例如：
h1 {
font-size: 1.4em; /* 14px */
}
我们学会了将 em 用于“弹性”布局。如果您在 em 中指定字体大小，则在用户放大或缩小后，文本将保持其比例。
然后，我看到人们一直使用 px 或其他字体声明；据我所知，它们都是标准的。我想这归结为创造最佳的用户体验。
【讨论】：
-
谢谢。 62.5% 来自哪里？
-
@Dan - 它基于浏览器默认字体大小为 16px 的假设。 16 * 62.5% = 10，因此 1.4em 映射到 14px。这个假设并不总是正确的，但对于在缩放网页时倾向于使用逻辑像素而不是物理像素的现代浏览器来说，可能效果还不错。
-
@Alohci - 感谢您的澄清。所以这是由浏览器决定的，并且可能在未来的任何时候波动？有这方面的文件吗？
-
在现代浏览器中，“中等”文本的默认大小为 16 像素。我怀疑这会很快改变，因为它现在似乎或多或少是标准的。不过，似乎没有很多关于它的文档。 62.5% 基本上只是让使用 em 更容易的一种方式。
-
@Dan - 由于各种原因，浏览器制造商不喜欢被默认的 CSS 值束缚，而且在他们编写规范时，这并不是一成不变的。所以它可能波动，但是，在这种情况下，他们都集中在使用相同的设置，所以我认为他们不太可能会离开，因为如果他们这样做，它可能会破坏一些网页，他们会因为用户回避而失去市场份额。
您应该将body 标记中的font-size 设置为100%。这样，访问您网站的人将看到与他们在浏览器中设置的大小相符的文本。例如，视力不佳的人可能会将文本大小设置得更大。如果您的 font-size 设置为 100%，他们应该会完全按照需要看到它。
之后，您可以使用% 或em 设置h1、h2、p 等的大小。
【讨论】：
我一般将html设置为10px，然后在body上使用font-size: 100%。然后，您可以在元素上使用 px/em 比率 14px/1.4em。我遇到的唯一问题是，如果我嵌套基本元素，字体就会变得很时髦，你必须在所有嵌套元素上指定 font-size。
示例：如果我有p, section, article, div{font-size: 1.6em;}，则任何时候我有p, section, article, div 嵌套，字体都会与容器成比例。所以最初的16px 的1.6em 现在是16px 的1.6em（不是10px）或25.6px。您必须将文本重新缩放为0.625em（或16px/25.6px = 0.625em）。您将对跨浏览器的一致性有更多的控制，但这可能需要您付出更多的努力。
有些人可能会问，“为什么要经历这么多麻烦？”这是个好问题。答案是：响应能力。那，我在一家需要符合 508 标准的公司工作。这包括对起始字体大小的最终控制。我不能假设最终用户选择了“中”或16pt 字体，因为法律明确规定它必须是 X 或 Y 以获得高对比度等。
【讨论】：
-
对于时髦的嵌套元素问题，使用
rem而不是em，这意味着root em（因此指向htmlfont-size，而不是元素的父元素。更多信息和在snook.ca/archives/html_and_css/font-size-with-rem 处为caniuse.com/#search=rem
有人说这不是一件好事，可能会破坏您的布局，请看：http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
【讨论】：