编辑:这是一个Fiddle的情况。
好吧，我正在构建一个网页，但我遇到了一个令人讨厌的字体怪癖。似乎无衬线字体拒绝恰好位于它们所在框的左边缘。
这里有一些实验性的 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 属性的任何想法？优雅地，也就是说 - 我真的不喜欢逐个字符的解决方案。
最佳答案
我不确定你是不是那个意思，但它可能是从 M 到它的边界的“边距”......
好吧，让我解释一下字体......
每个字母在其所在位置都有固定大小的“框”。因此，如果字体的创建者不使用整个空间，则可能会出现这种效果!意思是，除了编辑字体外，你不能做任何事情!
Here is an example (walkthrough on creating fonts), of what I mean.
示例图片，您可以看到上 M 的距离...因此，如果您不使左侧的 M 破折号 flex ，则直接进行，就像在您的版本中一样，您的边框和米! :)
如果您选择文本，您可以看到字符是正确的。 “蓝色”选项将向您显示它与边框直接对齐并且没有间隙，如果出现渲染或 css 错误就不会发生这种情况!
我希望我能帮助你回答这个问题。
关于html - 我怎样才能让这个文本一直坐在左边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10505121/