我遇到了问题,我需要让用户轻松阅读文本,所以我使用1 px的字母间距,但它看起来很难看,所以我想我会使用半像素所以0.5px ,但它不起作用,我尝试使用em属性,但没有完成任务。
有没有办法让字母间距为半像素(如果可能的话,跨浏览器解决方案)
答案 0 :(得分:17)
此错误已在2008年报告并得到确认。所以如果有人觉得自己喜欢攻击webkit会让很多设计师感到高兴。
答案 1 :(得分:6)
子像素字母间距在FF上工作正常,但在WebKit上不起作用(至少在Windows上)。见这个测试用例:
http://jsfiddle.net/fZYqL/2/
此测试还表明,不是子像素字面值是一个问题。使用小于{1}}的小数em
值也不会影响Webkit,但在Firefox上也可以使用。
答案 2 :(得分:5)
此错误已fixed in Chromium并已落在Chrome 30中。因此Firefox,Chrome和Opera现在支持小数值。
答案 3 :(得分:2)
@Zach Re:小数像素。虽然它们不是物理存在的,但它们是通过透明度和颜色变化进行数字模拟的。一个很好的例子是图标和类型的衬线。仔细观察看起来非常细的线条会很快显示它是通过渲染线条较淡的模拟来模拟的。因此,即使它们不存在,图形软件也会在很长一段时间内正确处理分数像素。很遗憾,webkit浏览器仍然没有。
Re:分数字母间距。它可以在非webkit浏览器中指定并正常工作(IE的荣誉一次)。在webkit浏览器中,字母间距四舍五入到最接近的整数(我相信它是向下舍入的)。这种舍入不仅发生在将字母间距直接指定为小数像素时,而且还指定为百分比或em值时,并且最终的像素计算结果为小数像素。非常令人沮丧。
答案 4 :(得分:1)
子像素大小是合法的,但它们可能会在浏览器中产生不可预测的结果。像文本这样的东西也试图将自己与整个像素对齐(正如Phrogz所说的那样),因此产生的舍入错误可能会使事情看起来不均匀。
答案 5 :(得分:1)
自2013年底以来,Webkit ,Firefox,Chrome和Opera均支持小数字间距值。
CSS技巧确认 - https://css-tricks.com/almanac/properties/l/letter-spacing/
我刚试过它。