子像素和字母间距

Question

I would like to use letter-spacing on my headings. The headings are responsive: at smaller screen sizes, the headings have a smaller font-size . Therefore it makes sense to use em for the letter-spacing measurement.

I've noticed that this results in subpixle letter-spacing . It appears fine in Firefox, Chrome and Safari on my Mac, but will it work across all browsers? Or will some (older) browsers round to the nearest pixel?

I want to avoid browsers rounding down to zero - therefore ignoring the letter-spacing. Or rounding up to 1 and the letter-spacing being too loose.

I read this post from several years ago, which implies browsers rounded subpixles Web-Kit and sub-pixel values, workaround?

h1 {
    font-size:7.2rem; /* equals 72px */
    letter-spacing:0.01em; /* equals 0.72px */
    }

Answer 1

经过更多研究，现代浏览器似乎确实支持子像素字母间距，请参阅https://css-tricks.com/almanac/properties/l/letter-spacing/