是否可以避免标题水平错位？答案

【问题标题】：Is it possible to avoid header horizontal misalignment?是否可以避免标题水平错位？
【发布时间】：2018-02-15 17:02:29
【问题描述】：

有些字母占据了左边的空闲空间。运行 sn-p 后，您可以通过突出显示第一个字母“H”来查看它。

页眉和段落元素中的边距和内边距相同，但页眉明显向右移动，因为它的字母“H”由于其大小而在左侧占据了较大的空白空间，相比之下到段落的字母“H”。

有没有办法避免这种转变，除了手动为每个案例使用填充？

<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <style>
    body {
      font-family: Open Sans;
    }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Hilariously small paragraph.</p>
</body>

【问题讨论】：

标签： html css typography

【解决方案1】：

这是正常的行为，但如果它真的让您非常不安，您可以在 h1 元素上使用否定的 text-indent，这会将整个文本向左移动一点：

h1 {
  text-indent: -0.05em;
}

<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <style>
    body {
      font-family: Open Sans;
    }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Hilariously small paragraph.</p>
</body>

【讨论】：

所以，不幸的是，这意味着我要么必须为每种情况移动文本以找到最合适的字体，要么将字体更改为实际字形周围没有太多空间的字体，对吧？

【解决方案2】：

您对此无能为力。这取决于您使用的字体。

您只需要手动添加 2px 填充或以我认为的其他方式移动元素。

p {
    padding-left: 2px;
}

【讨论】：

你有没有字体周围没有太多可用空间的字体示例？
我怀疑只有等宽字体适合此类
是的，没有间距的字体可能不太常见。如果您愿意，几乎只需手动更正这些情况。