3

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

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

在这个最近提交的 Chromium 问题中可以找到一个很好的说明。 查看这个简单的标记示例，您可以清楚地看到 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>

铬渲染：

铬字体大小

火狐渲染：

火狐字体大小

IE9 渲染：

IE9 字体大小

显然，这是一个不好的迹象，我能找到的最好的参考是在 Chromium 问题跟踪器中......但我认为问它不会有坏处。任何人都可以提出解决方法吗？CSS 或 JS 解决方案都很好 - 任何让这些字体更准确的方法！

4

1 回答 1

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/

于 2013-07-19T02:42:11.700 回答