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

Question

我在使用sans-serif字体时遇到标题问题。大多数字形不会“触摸”sans-serif字体中包含的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没有用于此目的的工具;它不会“知道”字形的外观和尺寸。