如何使任何无衬线字形“触摸”容器 div 的左边框？

Question

我在使用无衬线字体时遇到了标题问题。大多数字形不会“触摸”无衬线字体中包含 div 的左边框，字体越大，它变得越明显。因此，标题似乎与以下常规文本不一致。

这是一个示例代码：

h1 {
        font-family: sans-serif;
        font-size: 72px;
        font-weight: lighter;
    }
    
    .container {
        border-left: 1px solid;
    }

<div class="container">
    <h1>F glyph</h1>
    <h1>T glyph</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

http://jsfiddle.net/mishamsk/j73wwqa5/

有什么解决办法吗？

Answer 1

没有办法用 CSS 做到这一点，除非通过实验调整位置，其方式不可避免地依赖于字符和字体系列、粗细和样式。它还取决于字体大小，但这可以使用em 单元来处理。对于给出的示例，并特别使用 Arial（请注意，sans-serif 映射到与系统相关的默认字体），以下将起作用 - 但对于“F”以外的其他字符和其他字体，需要不同的值：

h1 {
        font-family: Arial, sans-serif;
        font-size: 72px;
        font-weight: lighter;
    }
    
    .container {
        border-left: 1px solid;
    }

<div class="container">
    <h1 style="text-indent: -0.06em">F glyph</h1>
    <h1>T glyph</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

我已经设置了这个值，使“F”大致与“T”一样靠近左边框，这并没有完全接触到它。

像这样的情况是在style元素中的内联样式表有意义的少数情况之一，因为规则与特定元素非常相关。

排版程序可能具有调整工具，可将字形与文本块的左边界或右边界对齐。他们知道字形的特性。但是 CSS 没有用于此目的的工具；它不“知道”字形是什么样子以及它的尺寸是多少。