我怎樣才能讓這段文字一路坐到左邊？

好吧，所以我正在建立一個網頁，但我遇到了一個惱人的字體怪癖。似乎無襯線字體拒絕精確地坐在他們坐在框的左邊緣

下面是一些實驗性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

我怎樣才能讓這段文字一路坐到左邊？

回答

相關問題