在 HTML/CSS 中设置字体大小的最标准方法

Question

我从事 HTML/CSS 工作多年，但我想澄清一些有关设置字体大小的事情。设置字体的最佳格式是什么？

通常，我一直以百分比形式设置字体大小，然后使用 em 向上或向下更改它。

这是最标准的方法吗？我见过以像素、点为单位声明的字体，以及诸如“更大”或“更小”之类的相关关键字，我见过它设置为百分比等。

那么什么是最标准的呢？最标准的就是最好的吗？有研究支持吗？

谢谢，

Answer 1

我在学校学到的知识如下：

将正文中的字体大小设置为 62.5%：

body {
      font-size: 62.5%;
}

然后你可以像使用像素一样使用 em，只不过除以 10。

例如：

h1 {
    font-size: 1.4em; /* 14px */
}

我们学会了使用 em 进行“弹性”布局。如果您以 em 指定字体大小，则在用户放大或缩小后文本将保持其比例。

话又说回来，我看到人们总是使用 px 或其他字体声明；据我所知，它们都是标准的。我想这只是为了创造最好的用户体验。

Answer 2

您应该将

font-size

标签中的

body

设置为

100%

。 这样，访问您网站的人就会看到适合他们在浏览器中设置的大小的文本。 例如，视力不佳的人可以将文本大小设置得较大。 如果您的

font-size

设置为

100%

，他们应该会完全按照预期看到它。

之后，您可以使用

h1

或

h2

设置

p

、

%

、

em

等的尺寸。

Answer 3

它们都是标准。使用适合您的方法。

Answer 4

我一般将

html

设置为

10px

，然后在

font-size: 100%

上使用

body

。然后，您可以在元素上使用 px/em 比率

14px

/

1.4em

。我遇到的唯一问题是，如果我嵌套基本元素，字体就会变得很时髦，并且您必须在所有嵌套元素上指定

font-size

。

示例：如果我有

p, section, article, div{font-size: 1.6em;}

，则每当我嵌套

p, section, article, div

时，字体都会与容器成比例。所以原来是

1.6em

的

16px

现在是

1.6em

的

16px

（不是

10px

）或

25.6px

。您必须将文本重新缩放为

0.625em

（或

16px

/

25.6px

=

0.625em

）。您将可以更好地控制跨浏览器的一致性，但这可能需要您付出更多的努力。

有些人可能会问：“为什么要经历这些麻烦呢？”这是一个好问题。答案是：响应能力。我在一家需要遵守 508 规定的公司工作。这包括对起始字体大小的最终控制。我不能依赖假设最终用户选择了“中”或

16pt

字体，因为法律明确规定它必须是 X 或 Y 以获得高对比度等。

Answer 5

有人说这不是一件好事，可能会破坏你的布局，请参阅：http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Answer 6

没有标准方法。您应该了解它们的工作原理，然后才能决定何时使用。这个视频可以帮助你理解..https://youtu.be/G4KySr05Xm0?si=FvOtQVbvzru6ie3Q