Proportional font with fixed width indivudual characters

HTML

<p class="w-fixed">
    <span>T</span><span>h</span><span>e</span><span> </span><span>q</span><span>u</span><span>i</span><span>c</span><span>k</span><span> </span><span>g</span><span>r</span><span>e</span><span>y</span><span> </span><span>f</span><span>o</span><span>x</span><span> </span><span>j</span><span>u</span><span>m</span><span>p</span><span>e</span><span>d</span><span> </span><span>o</span><span>v</span><span>e</span><span>r</span><span> </span><span>M</span>
</p>

<p>
    <span>T</span><span>h</span><span>e</span><span> </span><span>q</span><span>u</span><span>i</span><span>c</span><span>k</span><span> </span><span>g</span><span>r</span><span>e</span><span>y</span><span> </span><span>f</span><span>o</span><span>x</span><span> </span><span>j</span><span>u</span><span>m</span><span>p</span><span>e</span><span>d</span><span> </span><span>o</span><span>v</span><span>e</span><span>r</span><span> </span><span>M</span>
</p>

CSS

body {
  font: normal 100%/1.5 Arial;
}

span {
  outline: 1px dotted darkred;
}
span:nth-of-type(even) {
  outline-color: blue;
}

.w-fixed span {
  display: inline-block;
  min-width: 1em;
}

JavaScript

/*
SO http://stackoverflow.com/questions/14177368/is-there-a-way-to-make-a-variable-width-font-act-like-a-fixed-width-font-in-html
*/