在 CSS 的 font-size 属性中使用小数 em

发布于 2024-12-08 09:18:25 字数 164 浏览 0 评论 0原文

比方说,我定义了以下 CSS 规则:

.className {
font-size:0.89em;
}

我的问题是,在为浏览器实际支持它指定 em 时,我可以对分数进行“深入”了解,并且对于 em 中的小分数变化,字体大小会以不同的方式呈现价值?

Say, I have the following CSS rule defined:

.className {
font-size:0.89em;
}

My question is, how "deep" into fractions can I go while specifying 'em's for browsers actually to support it and for the font size to be rendered differently for a small fractional change in the em's value?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

过气美图社 2024-12-15 09:18:26

约翰 B 是对的。无论我们使用什么尺寸单位,我们仍然以像素为单位进行渲染,ems 的微小变化不会改变显示的尺寸:

例如,对于最初以 20px* 高度显示的文本,我们可以看到,当添加了一条规则,使其成为原始高度的 0.99em:

20 * 0.99 = 19.8 

浏览器无法显示 0.8 的像素,因此(假设它会向上舍入)它仍会将其显示为 20px 高。

尽管浏览器似乎并不总是按预期四舍五入:

http:// /meyerweb.com/eric/thoughts/2010/02/10/rounding-off/

http://ejohn.org/blog/sub-pixel-problems-in-css/

*是的,我知道 20px 的字体大小并不总是意味着它以 20px 显示!

JohnB is right. We're still rendering in pixels whatever the size unit we use, and small changes in ems will not change the displayed size:

For example, for text originally displaying at a height of 20px*, we can see that there is no effective change when a rule is added to make it .99em of its original height:

20 * 0.99 = 19.8 

The browser can't display .8 of a pixel, so (assuming it will round up) it will still display it as 20px high.

Though it appears that browsers do not always round off as expected:

http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/

http://ejohn.org/blog/sub-pixel-problems-in-css/

*Yep, I know a font-size of 20px doesn't alway mean it's displayed at 20px!

意犹 2024-12-15 09:18:26

但应该记住,小数 em 值与所有浮点数一样,容易受到舍入误差的影响。

我发现在设置媒体查询边界时,一个最大宽度与另一个最小宽度相差 0.00001em,并且它被四舍五入并且两个查询都被激活。将差异更改为 0.001em 后,查询完全按预期工作。

It should be kept in mind though, that fractional em values, like all floating point numbers, are susceptible to rounding error.

I found that out while setting my media query boundaries, where one max-width was 0.00001em away from another min-width, and it was rounded up and both queries were activated. After changing the difference to 0.001em the queries worked as expected, exclusively.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文