我怎样才能让这段文字一路坐到左边？

好吧，所以我正在建立一个网页，但我遇到了一个恼人的字体怪癖。似乎无衬线字体拒绝精确地坐在他们坐在框的左边缘

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

来源

2012-05-08 stack

尝试文字缩进？ –

这是一个浏览器和/或操作系统的具体问题，因为我无法使用Chrome在我的Mac上重现它。提供截图？然而，我会尝试像text-indent：-1px; –

我用'Google Chrome'和'Internet Explorer 8'成功复制了它。我相信这与字体渲染有关，我很好奇为什么。 – Peter

我不知道，如果你的意思是，但其propably的从M到其边境“保证金” ......

那么，让我解释一下字体...

每个字母有固定的大小“box”。因此，如果字体的创建者不使用整个房间，这种效果可能会发生！意思是，除了编辑字体，你不能做这件事情！

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

示例图片，在那里你看到上M的距离......所以如果你不要让左侧的M破折号弯曲，做直，就像在你的版本中，你将有一个“缺口“在你的边界和M之间！ :)

Font Character Box

可以看到，字符是正确的，因为它是，如果您选择的文本。 “蓝色”选择会告诉你，它与边界直接相连，没有差距，如果出现渲染或CSS错误，会发生什么！

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

来源

2012-05-08 21:07:52 creativeby

我怎样才能让这段文字一路坐到左边？

回答

相关问题