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

烂漫一生 提交于 2019-12-17 16:42:09

问题


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.

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


回答1:


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.

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




回答2:


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/

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




回答3:


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




回答4:


@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.

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.




回答5:


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.




回答6:


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

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

And I just tested it.



来源:https://stackoverflow.com/questions/7811225/is-there-a-way-to-make-css-letter-spacing-0-5-px

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!