Seeking guidance on achieving precise font rendering in Chrome, as I am encountering challenges. In order to accurately fill a specified width with text, I have implemented some basic JavaScript.
The JavaScript functions effectively by applying fractional font-size values to ensure the text fits within the designated space. While this approach results in a visually pleasing outcome in Firefox and IE, Chrome presents inconsistencies due to its tendency to round font sizes to the nearest whole pixel value.
A clear demonstration of this issue can be found in a recent Chromium bug report. By examining a sample HTML snippet provided there, one can observe how Chrome handles font-size rounding:
<html>
<body>
<div style='font-size: 10px'>Text Text Text Text</div>
<div style='font-size: 10.4px'>Text Text Text Text</div>
<div style='font-size: 10.5px'>Text Text Text Text</div>
<div style='font-size: 11px'>Text Text Text Text</div>
</body>
</html>
Comparison of font rendering across browsers:
Chrome rendering:
Firefox rendering:
IE9 rendering:
It is concerning that the most relevant information I could find pertaining to my issue was located within the Chromium issue tracker. Nonetheless, any suggestions for potential workarounds would be greatly appreciated. Whether through CSS or JS, I am open to any solutions that can improve the accuracy of font rendering in Chrome!