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

Question

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

使用属性短缺和特定属性似乎 load 在浏览器 Chrome中生效。

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，＆amp; Opera采用短代码并将其分成特定属性，但仍然会加载忽略px单位的rem单位。

它似乎特定于Chrome，至少在现代版本中。那么现在的问题是，如何弄清楚Chrome如何处理它？显示在这篇文章底部的图片可以解释一下。看看如何加载BOTH字体属性，既不会被忽略也不会被优先使用？

更新＃2： 使用边距时，Chrome可以正常运行。我将使用以下“离墙”示例来演示：

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

将chrome读入：

margin:1em 0 1.188rem 0;

screenshot of google "inspect element" on body http://leftdeaf.com/chromefont-size.jpg

Answer 1

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

http://snook.ca/archives/html_and_css/font-size-with-rem

http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

使用行高，请使用单位，而不是值：

body { 字体：16px / 23px sans-serif; 字体：1rem sans-serif; 行高：1.438; }

或

body { 字体大小：16px的/ 23像素; font-size：1rem; font-family：sans-serif; 行高：1.438; }

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

Answer 2

经过大量浪费时间和混乱......实际上它确实在谷歌浏览器中正确呈现。 现在感觉很傻 ...我忽略了Chrome Tools中子属性的下拉箭头。图像显示了我忽略的内容。示例显示了速记属性和特定属性的多个示例，更重要的是它显示font属性正常工作，它不是划掉但它仍然被覆盖。不知道为什么它不像其他一切那样符合通过进行攻击，可能是由于font-weight，variant，style属性保持不变。但它的确有效。