有什么办法可以强制 Chrome 准确地渲染小数像素字体大小？答案

【问题标题】：Is there any way to force Chrome to render fractional pixel font sizes accurately?有什么办法可以强制 Chrome 准确地渲染小数像素字体大小？
【发布时间】：2013-07-18 01:45:03
【问题描述】：

我在 Chrome 中的准确字体渲染方面遇到了问题，想知道这里是否有人可以提供一些建议。我需要用文本精确填充分配的宽度，这是通过一些简单的 JavaScript 完成的。

JS 运行良好，并且正确地将分数字体大小值应用于我的每个宽度填充跨度，并且在 Firefox/IE 中看起来很棒。但是，Chrome 中的外观非常参差不齐，因为它会将字体大小四舍五入到最接近的整数像素值。

in this recently filed Chromium issue. 可以找到一个很好的问题说明查看这个简单的标记示例，您可以清楚地看到 Chrome 的字体大小舍入：

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

Chrome 渲染：

火狐渲染：

IE9 渲染：

显然，我可以在 Chromium 问题跟踪器中找到关于我需要做的事情的最佳参考，这是一个不好的迹象……但我认为问一下也无妨。任何人都可以提出解决方法吗？ CSS 或 JS 解决方案都很好 - 任何让这些字体更准确的方法！

【问题讨论】：

Chrome（在 Windows 上）真的真的在呈现文本方面很糟糕。我所知道的是他们正在努力... :( 如果有人能告诉我其他情况，那就太好了。
我想值得一提的是，我在 Windows 和 Mac 上的 Chrome 中都看到了这种行为。
截至Chrome 37.0.2062.102 m，问题似乎已解决。

标签： javascript css google-chrome layout

【解决方案1】：

我想到的唯一解决方法是应用-webkit-transform: scale(x)，例如：

div[style*="10."]  {-webkit-transform-origin: 0 50%;}
div[style*="10.1"] { -webkit-transform: scale(1.01);}
div[style*="10.2"] { -webkit-transform: scale(1.02);}
div[style*="10.3"] { -webkit-transform: scale(1.03);}
div[style*="10.4"] { -webkit-transform: scale(1.04);}
div[style*="10.5"] { -webkit-transform: scale(1.05);}
div[style*="10.6"] { -webkit-transform: scale(0.96);}
div[style*="10.7"] { -webkit-transform: scale(0.97);}
div[style*="10.8"] { -webkit-transform: scale(0.98);}
div[style*="10.9"] { -webkit-transform: scale(0.99);}

我想，问题在于，由于您是自动调整文本，因此您可能会得到element.offsetWidth，这将为您提供缩放前的宽度。要在缩放后获取它，请使用 element.getBoundingClientRect().width（您的库可能已经处理了这个问题）。你可以在这里看到它的实际效果：

http://jsfiddle.net/Cfd5a/

【讨论】：

看起来很有希望，我会检查这个选项。
我实际上并没有得到 offsetWidth——我是在用一个 hackier 解决方案推导出缩放我的文本的数量。在该属性和-webkit-transform/-transform 之间，我能够解决我的问题。谢谢！