2

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

使用属性简写和特定属性似乎都加载在浏览器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 大小。在 IE、safari 和 Opera 中，它采用简码并将其分离为特定属性，但仍会加载 rem 单位而忽略 px 单位。

它似乎是特定于 Chrome 的，至少在现代版本中是这样。所以现在的问题是，如何弄清楚 Chrome 是如何处理它的？显示在这篇文章底部的图像可能会解释更多。看看这两个字体属性是如何加载的，既没有被忽略也没有优先权？

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

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

在 chrome 中读取为：

margin:1em 0 1.188rem 0;

谷歌截图
（来源：leftdeaf.com）

4

2 回答 2

1

This two resources will answer all of your questions:

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

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

With line-height, use the unit, but not the value:

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

or

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

You can't use FONT and FONT-SIZE, just use one or the other. Otherwise the browser will attempt to use both.

于 2013-04-27T23:17:33.720 回答
1

经过大量浪费时间和混乱......它实际上在谷歌浏览器中正确呈现。现在感觉很傻......我忽略了 Chrome 工具中子属性的下拉箭头。图像显示了我忽略的内容。示例显示了速记属性和特定属性的多个示例，更重要的是它显示了font属性工作，它没有被划掉，但它仍然被覆盖。不知道为什么它不像其他所有东西一样符合删除线，可能是由于字体粗细、变体、样式属性保持不变。但它有效。

嗬！

于 2013-04-28T05:02:57.240 回答