"Táco“比"Taco”更宽。我怎么才能解决呢？

Question

我试着在一个div的上面装一个div，没有。但间隔不像我那么好。(见下面的片段。)我怎么才能解决这个问题？

​

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

<div class="text">String String String String String String String String String String
	<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
	<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>

​

Answer 1

​

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

    <div class="text">String String String String String String String String String String
    	<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
    	<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>

​

如果您能够进行权衡，您总是可以尝试使用单空间字体系列。

Answer 2

你会想看看字体角化。

字体- kerning CSS属性控制kerning信息的使用；也就是说，它控制字母的间距。角化信息存储在字体中，如果字体是良好的角化，则该功能允许字符之间的间距非常相似，无论字符是什么。

看看这支笔，http://codepen.io/anon/pen/JKPMGM，我把笔尖设为none，他们排成一排。

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;
    }

更多的信息。

Kerning调整单个字母窗体之间的空格，而跟踪(字母间距)则在字符范围内统一调整间距。在一个良好的角化字体中，每个字符之间的二维空格都有一个视觉上相似的区域。