css - 浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css？

我已经开始使用带有 PX 后备的 REM 单元开发一个新站点。现在，我有一个可能很愚蠢的问题，但我找不到任何具体提及它的内容，所以我就在这里问。

使用属性简写和特定属性似乎都可以在 ~~浏览器~~ Chrome 中~~load~~ 生效。

body{ font:16px/23px sans-serif;
      font-size:1rem;
      line-height:1.438; }

同时使用简写或同时使用两个特定属性会取消其中一个属性(例如使用主要属性或后备属性，而不是同时使用两者)

body{ font-family:sans-serif;
      font-size:16px; font-size:1rem;
      line-height:23px; line-height:1.438; }

或

body{ font:16px/23px sans-serif;
      font:1rem/1.438 sans-serif; }

现在哪一个才是最佳实践？所有的例子都验证了。为什么简写和特定属性都会加载到~~浏览器~~ Chrome 中，即使它们针对的是相同的属性？它们实际上都在加载吗？这对浏览器/设备呈现样式的方式有任何不利影响吗？

~~我只通过 Chrome 对此进行了研究~~ 我无法通过测试辨别出任何差异。但是，您可以看到，如果您必须对使用 rem 的所有元素使用相同代码的两次迭代，那么它会有点庞大。

更新: 仅在以下所有浏览器的最新版本中进行测试，所有测试都与第一个代码片段有关

在 Firefox 中这似乎不是问题，它只是用 rem 大小替换了速记代码中的 font-size/line-height 。在 IE、safari 和 Opera 中，它采用短代码并将其分离为特定属性，但仍然加载 rem 单位而忽略 px 单位。

它似乎是 Chrome 特有的，至少在现代版本中是这样。那么现在的问题是，如何弄清楚 Chrome 是如何处理的呢？这篇文章底部显示的图像可能会解释更多一些。了解如何加载两个字体属性，并且两者都不会被忽略或优先？

更新#2: 当使用边距时，Chrome 会正常运行。我将使用下面的“off the wall”示例来演示:

margin:16px 0 19px 0;
margin-top:1rem;
margin-bottom:1.188rem;

在 Chrome 中读取为:

margin:1em 0 1.188rem 0;

最佳答案

这两个资源将回答您的所有问题:

对于 line-height，使用单位，但不使用值:

正文{ 字体:16px/23px 无衬线；字体:1rem 无衬线；行高:1.438； }

或

正文{ 字体大小:16px/23px；字体大小:1rem；字体系列:无衬线字体；行高:1.438； }

您不能使用 FONT 和 FONT-SIZE，只能使用其中之一。否则浏览器将尝试同时使用两者。

关于css - 浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16256628/