CSS 有没有办法让css letter-spacing: 0.5 px?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7811225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:55:34  来源:igfitidea点击:

Is there a way to make css letter-spacing: 0.5 px?

cssletter-spacing

提问by Ilja

I ran across the problem, I need to make it easy for users to read the text, so I used letter-spacing of 1 px, but it looks ugly, so I thought I'll use half a pixel so 0.5px, but it doesn't work, I tried using em attributes, but didn't achieve the task.

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

So is there a way to make letter spacing half pixel (cross browser solution if possible)

那么有没有办法使字母间距为半像素(如果可能,跨浏览器解决方案)

采纳答案by idFlood

This bug has been reported back in 2008 and is confirmed. So if someone feels like hacking into webkit that would make a lot of designers happy.

此错误已在 2008 年报告并得到确认。因此,如果有人想入侵 webkit,那会让很多设计师感到高兴。

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

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

回答by Phrogz

Sub-pixel letter spacing works fine on FF, but not on WebKit (at least on Windows). See this test case:
http://jsfiddle.net/fZYqL/2/

子像素字母间距在 FF 上工作正常,但在 WebKit 上无效(至少在 Windows 上)。请参阅此测试用例:http:
//jsfiddle.net/fZYqL/2/

This test also shows that it is not the sub-pixel literal value that is a problem. Using fractional emvalues that result in less than 1px of letter-spacing are also not honored on Webkit, but work just as well on Firefox.

该测试还表明,问题不是子像素文字值。使用em导致字母间距小于 1px 的小数值在 Webkit 上也不受支持,但在 Firefox 上也同样适用。

Firefox versus Webkit

Firefox 与 Webkit

回答by Maximilian Hoffmann

This bug has been fixed in Chromiumand landed in Chrome 30. So fractional values are now supported by Firefox, Chrome and Opera.

此错误已在 Chromium 中修复并在 Chrome 30 中登陆。因此,Firefox、Chrome 和 Opera 现在支持小数值。

回答by cockypup

@Zach Re: fractional pixels. Although they do not exist physically, they are simulated digitally by transparencies and changes in colour. A good example are icons and the serifs of type. A close look at what appears to be a very thin line will quickly show that it is simulated by rendering the line with a lighter colour that fools the eye. So even when they do not exist, graphic software has dealt with fractional pixels properly since a long time. It is a shame that webkit browsers still don't.

@Zach Re:分数像素。尽管它们在物理上并不存在,但它们是通过透明度和颜色变化以数字方式模拟的。一个很好的例子是图标和类型的衬线。仔细观察一条看起来很细的线,很快就会发现它是通过用较浅的颜色渲染线来模拟的,从而欺骗了眼睛。因此,即使它们不存在,图形软件长期以来也能正确处理分数像素。遗憾的是 webkit 浏览器仍然没有。

Re: fractional letter spacing. It can be specified and works fine in non-webkit browsers (kudos for IE for once). In webkit browsers letter spacing is rounded to the closest integer (I believe that it is rounded down). This rounding happens not only when the letter-spacing is specified directly as a fractional pixel but also when it is specified as a percentage or em value and the final calculation in pixels results into a fractional pixel. Very frustrating.

回复:小数字母间距。它可以在非 webkit 浏览器中指定并正常工作(一次为 IE 点赞)。在 webkit 浏览器中,字母间距被四舍五入到最接近的整数(我相信它被四舍五入了)。这种舍入不仅在将字母间距直接指定为小数像素时发生,而且在将其指定为百分比或 em 值并且以像素为单位的最终计算结果为小数像素时也会发生。非常令人沮丧。

回答by Toomai

Sub-pixel sizes are legal, but they can have unpredictable results across browsers. Things like text also try to align themselves to whole pixels (as Phrogz says), so chances are the resulting rounding errors might make things look uneven.

子像素大小是合法的,但它们可能会在浏览器中产生不可预测的结果。像文本这样的东西也会尝试将自己与整个像素对齐(如 Phrogz 所说),因此产生的舍入错误很可能会使事情看起来不均匀。

回答by Joshua Dance

Fractional letter-spacing values are supported by Webkit, Firefox, Chrome and Opera, since the end of 2013.

自 2013 年底以来,Webkit、Firefox、Chrome 和 Opera支持分数字母间距值。

Confirmed by CSS Tricks - https://css-tricks.com/almanac/properties/l/letter-spacing/

由 CSS 技巧确认 - https://css-tricks.com/almanac/properties/l/letter-spacing/

And I just tested it.

我刚刚测试了它。