Question

我在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呈现：

Chrome font size

Firefox渲染：

Firefox font size

IE9渲染：

IE9 font size

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

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

有没有办法强制Chrome准确呈现小数像素字体大小？

1 个答案: