简体   繁体   中英

Subpixel and letter-spacing

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 */
    }

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM