6

编辑：这是情况的小提琴。

好的，所以我正在构建一个网页，但我遇到了一个令人讨厌的字体怪癖。似乎无衬线字体拒绝精确地位于它们所在的框的左边缘。

这里有一些实验性的 HTML 来演示这个问题：

<html>
<head>
    <style>
        .box {
            margin: 30px 0px 0px 30px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body style="font-size: 36px;">
    <!-- text beginning with 'M', which has serifs protruding from the left side in a serif font -->
    <div class="box" style="font-family: 'Segoe UI';">My text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Times New Roman';">My text</div> <!-- serif -->
    <div class="box" style="font-family: 'Arial';">My text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Garamond';">My text</div> <!-- serif -->

    <!-- text beginning with 'T', which has no left-protruding serifs in a serif font -->
    <div class="box" style="font-family: 'Segoe UI';">Text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Times New Roman';">Text</div> <!-- serif -->
    <div class="box" style="font-family: 'Arial';">Text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Garamond';">Text</div> <!-- serif -->
</body>
</html>

关于 CSS 属性的任何想法我可以设置/修改以使文本位于其容器的左边缘？优雅地，就是 - 我真的不喜欢逐个字符的解决方案。

4

1 回答 1

2

我不确定你是否是这个意思，但它可能是从 M 到其边界的“边距”......

好吧，让我解释一下字体...

每个字母在其所在的位置都有固定大小的“框”。因此，如果字体的创建者没有使用整个房间，则可能会发生这种效果！意味着，除了编辑字体，你不能做任何事情！

这是我的意思的示例（创建字体的演练）。

示例图片，您可以在其中看到上 M 的距离……因此，如果您不使左侧 M 破折号弯曲，请笔直进行，就像在您的版本中一样，您的边框和 M 之间会有一个“间隙”！:)

字体字符框

如果您选择文本，您可以看到该字符是正确的。“蓝色”选择会告诉您它与边框笔直且没有间隙，如果出现渲染或 css 错误不会发生什么！

我希望我能帮助你回答这个问题。

于 2012-05-08T21:07:52.777 回答