「Táco」比「Taco」寬。我該如何解決這個問題？

我正試圖加載一個分區與迪克的頂部沒有。間距不像我這樣工作。（請參閱下面的代碼片段。）我該如何解決這個問題？「Táco」比「Taco」寬。我該如何解決這個問題？

div.text { 
 
\t  width: 75%; 
 
\t  position: relative; 
 
\t } 
 
\t div.diacritics { 
 
\t  width: 100%; 
 
\t  height: 100%; 
 
\t  position: absolute; 
 
\t  top: 0; 
 
\t  left: 0; 
 
     z-index: -1; 
 
     color: red; 
 
\t }

<div class="text">String String String String String String String String String String 
 
\t <div class="diacritics"> 
 
    Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div> 
 
    </div> 
 

 
<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco 
 
\t <div class="diacritics"> 
 
    Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div> 
 
    </div>

來源

2016-05-26 webmagnets

我無法在Mac OS X上重現此問題：http://i.stack.imgur.com/BH9Sw.png – duskwuff

作爲對比，我也在OS X上，但看到了問題 - 我認爲這是安裝字體的差異。這表明這個問題的答案是「不要試圖做到這一點，因爲結果不容易預測。」 –

如果「Táco」並不總是與「Taco」寬度完全相同，那麼你的佈局應該更健壯。 – Sparky

div.text { 
 
    \t  width: 75%; 
 
    \t  position: relative; 
 
      font-family: monospace; 
 
    \t } 
 
div.diacritics { 
 
    \t  width: 100%; 
 
    \t  height: 100%; 
 
    \t  position: absolute; 
 
    \t  top: 0; 
 
    \t  left: 0; 
 
      font-family: monospace; 
 
      z-index: -1; 
 
      color: red; 
 
    \t }  \t

<div class="text">String String String String String String String String String String 
 
    \t <div class="diacritics"> 
 
     Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div> 
 
     </div> 
 

 
    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco 
 
    \t <div class="diacritics"> 
 
     Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div> 
 
     </div>

如果你能做出的權衡，你總是可以嘗試使用等寬字體的家庭。

來源

2016-05-26 02:47:11 StardustGogeta

我想這個回答最好的問題，即使我不喜歡使用該字體。謝謝。 – webmagnets

你會想看看font-kerning。

font-kerning CSS屬性控制了字距信息的用法;也就是說，它控制字母間隔的方式。信息信息存儲在字體中，如果字體良好，此功能允許字符之間的間距非常相似，無論字符是什麼。

看看這支筆http://codepen.io/anon/pen/JKPMGM，我設置爲無，他們排隊。

div.text { 
     width: 75%; 
     position: relative; 
     font-kerning:none; 
    } 
    div.diacritics { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     font-kerning:none; 
     top: 0; 
     left: 0; 
     z-index: -1; 
     color: red; 
    }

有點多信息。

字距調整用於調整個體信形式之間的空間，同時跟蹤（字母間距）調整在一定範圍內的字符統一間距。在字體良好的情況下，每對字符之間的二維空白區域都具有視覺上相似的區域。

來源

2016-05-26 03:13:58

謝謝，但它仍然無法在我的Mac OS x上運行。我想知道爲什麼有些人可以重現這個問題，有些人不能。 – webmagnets

它看起來不像你指定的字體。你想用什麼字體？ –

「Táco」比「Taco」寬。我該如何解決這個問題？

回答

相關問題