css rem 单元不适用于字体声明

Posted 2023-03-06

【中文标题】css rem 单元不适用于字体声明

【英文标题】：css rem unit not working with font declarations

【发布时间】：2013-04-15 23:00:52

【问题描述】：

这个 css 属性在 IE10 上不起作用：

font: bold 3rem/6rem Arial;

但是，如果我将此属性拆分为单独的属性，它会起作用：

font-size: 3rem;
font-weight: bold;
line-height: 6rem;
font-family: Arial;

我也可以使用 PX，它也可以：

font: bold 48px/96px Arial;

您可以使用 IE 调试器在每个页面上进行尝试。为什么这个属性不能在 IE 上运行，而是在所有其他浏览器上运行？

【参考方案1】：

在 IE 中不支持 rem 单位作为字体速记。这是一个已知的错误。希望这将得到解决。我知道的唯一解决方法是在字体属性之后再次指定字体大小，或者在使用 rem 时不使用简写。

错误报告是https://connect.microsoft.com/IE/feedback/details/772679/ie10-not-recognizing-font-decloration-when-rem-is-used-as-font-size-unit-of-measure

更新：请注意，从 IE11 开始，此问题已得到修复。

【讨论】：

此外，IE 8 和更早版本根本不支持rem 单元，这使得它的使用颇受质疑。它有时会很方便，帮助您避免计算用于em 的乘数，但如果您需要考虑旧浏览器，使用rem 您最终会遇到更多麻烦造型，不少。