Question

使用sans-serif字体时，我遇到标题问题。大多数字形不会触及＆＃34;在sans-serif字体中包含div的左边框，字体越大，它变得越明显。因此标题似乎与以下常规文本不一致。

以下是示例代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

有解决方法吗？

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我设置了这个值，以便“F”与“T”大致一样接近左边框，“T”并没有触及它。

这些情况属于style元素中的内联样式表有意义的少数情况，因为规则与特定元素非常相关。

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

如何制作任何无衬线字形＆＃34;触摸＆＃34;左边框的容器div？

1 个答案: