html - 我可以在 px 行高内包含我的 em 大小的字体吗？

Question

我正在查看的 CSS 如下所示:

header .logo {
    text-align: center;
    line-height: 77px;
    font-size: 4em;
    font-weight: bold;
    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}

如果我转向移动设备，有人能告诉我这是否会成为问题吗？我是否应该始终在 em 大小的行高内包含 em 大小的字体？

Answer 1

px 单位和em 单位非常不同。 px 单位表示一个像素，这是一个相对的概念，可能因显示设备而异(详细说明请参阅 CSS Values and Units Module Level 3)，而 em 单位在使用时在 font-size 属性的值中，表示父元素的字体大小。该大小因上下文、应用的 CSS 规则等而异，最终由用户控制。所以它可以是任何东西。如果您假设 em 是特定的像素，那么在某些情况下该假设将不可避免地失败；如果你假设一个特定的大小，为什么不在整个过程中使用 px？

所以你应该设置font-size和line-height使用相同的单位或者使用具有固定的、定义明确的关系的单位。通常，您应该以 em 为单位进行设置，或者都以 px 为单位进行设置，以确保它们适合在一起。但是，如果您将字体大小设置为 em，则可以为 line-height 使用纯数字，例如 line-height: 1.2，因为除了继承问题，纯数字有效地将 em 作为隐含单位。

例如，要么

line-height: 77px;
font-size: 64px;

或

line-height: 1.2em;
font-size: 4em;

将保持一致。