“Táco” is wider than “Taco”. How can I fix that?

Question

I\'m trying to load a div with diacritics on top of a div without. The spacing isn\'t working out like I though. (See the snippet below.) How can I fix this?

相关标签:

Answer 1

You're going to want to look at font-kerning.

The font-kerning CSS property controls the usage of the kerning information; that is, it controls how letters are spaced. The kerning information is stored in the font, and if the font is well-kerned, this feature allows spacing between characters to be very similar, whatever the characters are.

Check out this pen http://codepen.io/anon/pen/JKPMGM, I set kerning to none and they lined up.

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

A little more info.

Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters. In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have a visually similar area.

Answer 2

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>

If you are able to make the trade-off, you could always try using a monospace font family.