Subpixel text measurements

HTML

<div id='spans'>
<span style="font-size: 1px;">i</span>
<span style="font-size: 2px;">i</span>
<span style="font-size: 3px;">i</span>
<span style="font-size: 4px;">i</span>
<span style="font-size: 5px;">i</span>
<span style="font-size: 6px;">i</span>
<span style="font-size: 7px;">i</span>
<span style="font-size: 8px;">i</span>
<span style="font-size: 9px;">i</span>
<span style="font-size: 10px;">i</span>
<span style="font-size: 11px;">i</span>
<span style="font-size: 12px;">i</span>
<span style="font-size: 13px;">i</span>
<span style="font-size: 14px;">i</span>
<span style="font-size: 15px;">i</span>
<span style="font-size: 16px;">i</span>
<span style="font-size: 17px;">i</span>
<span style="font-size: 18px;">i</span>
<span style="font-size: 19px;">i</span>
<span style="font-size: 20px;">i</span>
</div>
<hr/>
<pre id='log'>
</pre>

JavaScript

//debugger;
function log(str) {
  document.getElementById('log').innerHTML += str + '\n';            
}
var spansDiv = document.getElementById('spans');
var spans = spansDiv.querySelectorAll('span');
for(var i = 0; i < spans.length; i++) {
    rect = spans[i].getBoundingClientRect();
    log( 'span[' + i + ']: rect.width=' + rect.width);
}