2011-10-18 49 views
30

我遇到了这个问题,我需要让用户阅读文本变得很容易,所以我使用了1px的字母间距,但看起来很丑,所以我认为我会使用0.5像素的半个像素,但它不起作用,我尝试使用em属性,但没有完成任务。有没有办法让CSS的字母间距:0.5像素?

那么,有没有一种方法,使

+1

您可能会遇到[font-hinting](http://en.wikipedia.org/wiki/Font_rasterization)中的像素对齐问题;您可能会偏移半个像素,但字体光栅化程序会将文本重新对齐到像素边界。从操作系统到操作系统,浏览器到浏览器,0.5px的效果可能会有所不同。 – Phrogz

+0

由于这是谷歌搜索结果的顶部,为了帮助新手们,截至2013年底,所有主流浏览器都支持小数字母间隔。 –

回答

17

此错误已在2008年被报道背部和确认。所以如果有人想入侵webkit,会让很多设计师感到高兴。

https://bugs.webkit.org/show_bug.cgi?id=20606

+0

看起来像一个补丁终于降落在webkit!而Chrome/blink在一段时间之前已经修复。所以我们很快就能够安全地使用分数字母间距。 – idFlood

+0

仍然没有在Safari ... –

+0

我刚刚测试过最新的safari(8.0),它现在正在工作:) – idFlood

1

子像素尺寸是合法的字母间距半像素(如果可能的跨浏览器解决方案),但它们可以有不同的浏览器不可预知的结果。像文本这样的东西也会尝试将自己与整个像素对齐(如Phrogz所说),所以出现的舍入错误可能会使事情看起来不均匀。

+2

根据[CSS2规范](http://www.w3.org/) TR/1998/REC-CSS2-19980512 /文本。html#spacing-props)间距的数量是_“**除**之外的字符之间的默认空间”_;有一个额外的0.5px是一个合理的和可读的愿望 – Phrogz

+0

好吧,错误从答案中删除。 – Toomai

6

子像素字母间距在FF上工作正常,但不在WebKit上(至少在Windows上)。看到这个测试用例:
http://jsfiddle.net/fZYqL/2/

这个测试也显示它不是子像素立即数值是一个问题。使用分数em值导致少于1px的字母间距在Webkit上也不受尊重,但在Firefox上工作也一样。

Firefox versus Webkit

2

@Zach重新:小数像素。尽管它们并非物理存在,但它们是通过透明胶片进行数字模拟并进行颜色变化的。一个很好的例子是图标和类型的衬线。仔细看看看起来非常细的线会很快显示出它是通过渲染线条来淡化颜色而模糊了眼睛。所以即使它们不存在,图形软件也会很长一段时间才能正确处理分数像素。 Webkit浏览器仍然没有这个功能,这真是令人遗憾。

Re:小数字母间距。它可以在非webkit浏览器中指定并正常工作(IE的赞誉只有一次)。在webkit浏览器中,字母间距是四舍五入到最接近的整数(我相信它是向下舍入的)。该舍入不仅发生在字母间距直接指定为分数像素时,而且当它被指定为百分比或em值并且以像素为单位的最终计算结果为分数像素时。非常令人沮丧。

5

此错误已被fixed in Chromium降落到Chrome 30中。现在Firefox,Chrome和Opera支持小数值。

+0

这被告知是固定的,但我仍然可以在最新的版本中看到它(现在)'31.0.1650.48 M'。 –

+0

在Chrome版本31.0.1650.48上测试了上面的示例(http://jsfiddle.net/fZYqL/2/),该版本对我而言效果很好。 – Max

+0

经过测试,似乎也在使用IE9 + – Wolverine

相关问题