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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您能够进行权衡，您可以尝试使用等宽字体系列。

Answer 2

您想要查看 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;
    }

更多信息。

Kerning调整单个字母表单之间的空格跟踪（字母间距）在一定范围内均匀地调整间距字符。在一个良好的字体，二维空格每对字符之间都有一个视觉上相似的区域。

“Táco”比“Taco”更广泛。我该如何解决这个问题？

2 个答案: