logo标签列表

有没有一种方法可以使CSS的letter-spacing属性为0.5像素？

cssletter-spacing
33
我遇到了一个问题，我需要让用户更容易阅读文本，所以我使用了1像素的字间距，但是它看起来很丑，所以我想用半个像素，即0.5像素，但是这样不起作用，我尝试使用em属性，但没有达到目标。
那么有没有办法使字母间距为半个像素（如果可能的话，跨浏览器解决方案）？
1
你可能会遇到字体提示的像素对齐问题；你可能会将其移动半个像素，但是字体光栅化器会重新对齐文本以适应像素边界。0.5像素的影响在不同的操作系统和浏览器中可能会有所不同。 - Phrogz
1
由于这是谷歌搜索结果的首选，为了帮助其他新手，自2013年底以来，所有主流浏览器都支持分数字母间距。 - Joshua Dance
6个回答
18
看起来补丁终于在 Webkit 中落地了！而 Chrome/Blink 也在一段时间前被修复了。因此，我们很快就能安全地使用小数 letter-spacing 了。 - idFlood
我刚刚测试了最新版本的Safari（8.0），现在它可以工作了：） - idFlood
6
这个问题已经在Chromium中得到修复，并且已经在Chrome 30中实现。因此，Firefox、Chrome和Opera现在都支持小数值。
据说这个问题已经被修复了，但我仍然可以在最新版本（目前为止）的31.0.1650.48 m中看到它。 - Michał Rybak
1
我在Chrome版本31.0.1650.48上测试了上面的示例（http://jsfiddle.net/fZYqL/2/），对我来说运行良好。 - Max Hoffmann
6

Sub-pixel字间距在Firefox上可以正常工作，但在WebKit（至少在Windows上）上不能。请参阅此测试案例：
http://jsfiddle.net/fZYqL/2/

这个测试还表明，不是子像素文本值是问题所在。使用产生小于1像素字间距的分数em值也不被WebKit接受，但在Firefox上同样有效。

Firefox versus Webkit

2

@Zach 关于小数像素。虽然它们在物理上不存在，但是通过透明度和颜色的变化在数字上进行模拟。一个很好的例子是图标和字体的衬线。仔细观察看起来非常细的线条，会很快发现它是通过使用较浅的颜色来渲染线条来进行模拟的，这欺骗了眼睛。因此，即使它们不存在，图形软件也早已妥善处理了小数像素。可惜的是，webkit浏览器仍然没有做到。

关于小数字符间距。它可以被指定并在非webkit浏览器中正常工作（IE也算赞一次）。在webkit浏览器中，字符间距会被四舍五入到最接近的整数（我相信它会向下取整）。这种舍入不仅发生在直接指定为小数像素的字符间距上，而且还发生在将其指定为百分比或em值并且最终计算结果为小数像素时。非常令人沮丧。

1
1

子像素大小是合法的，但在不同浏览器中可能会产生不可预测的结果。像文本这样的元素也会尝试对齐到整个像素（正如Phrogz所说），因此舍入误差可能会使事物看起来不平衡。

2
根据CSS2规范，间距的数量是“除了字符之间的默认空格之外的额外空间”；拥有额外的0.5像素是一个合理且易读的要求。 - Phrogz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接