Question

修改：这是Fiddle的情况。

好的，所以我正在建立一个网页，但我遇到了一个令人恼火的字体怪癖。似乎sans-serif字体拒绝准确地坐在他们所在的盒子的左边缘。

以下是一些用于演示此问题的实验性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属性的任何想法我可以设置/修改以使文本位于其容器的左边缘？优雅地说，那就是 - 我真的不喜欢逐个字符的解决方案。

Answer 1

我不确定你的意思是否存在，但它可能是从M到边界的“边际”......

让我解释一下字体......

每个字母都有固定大小的“盒子”。所以如果字体的创建者不使用整个房间，可能会发生这种效果！意思是，除了编辑字体外，你不能对此做任何事情！

Here is an example (walkthrough on creating fonts), of what I mean.

示例图片，在这里您可以看到上部M的距离......所以，如果你不使左边的M破折号弯曲，直接做，就像你的版本一样，你的边框和边界之间会有一个“间隙”中号！：）

Font Character Box

如果选择文字，你可以看到角色是否正确。 “蓝色”选项将向您显示它与边界笔直且没有间隙，如果出现渲染或css错误，将会发生什么！

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

我怎样才能让这个文字一直坐到左边？

1 个答案: