此 font: 速记属性语法有效吗？ （我对规范的阅读表明是的，但我安装的浏览器中有一半不同意。）

Question

这是有效的吗？ 字体：粗体10px/13px继承;

根据我对规范应该意味着“粗体”的字体粗细、“继承”的字体系列、“10px”的字体大小和“13px”的行高。

它似乎在 Internet Explorer 8 (8.0.6001.18702) 中正常工作。

它在 Windows 上的 Safari 5.0.4 (7533.20.27) 中正常工作。

Opera 11.01（build 1190）和 Firefox 3.6.16 都记录了有关它的错误。

我还没有尝试过 Chrome 或 Firefox 4。

如果这确实应该被验证，那么这个解析错误是否是一个已知问题？

还有几点：

• W3 验证器也将其报告为无效。
• 没有“字体：粗体 10px 继承；”、“字体：粗体 10px/13px；”或“字体：粗体 10px；”在 Firefox 中也可以正常工作。

更新

正如 Adam Wagner 在他的回答中指出的那样，由于 CSS2.1 规范的第 C.3.1 节，我尝试的值实际上是无效的（尽管我对规范的天真阅读表明了这一点）。

Answer 1

我认为问题在于“继承”你的价值。

根据规格：

[ [ <'font-style'>; || <'字体变体'> || <'字体粗细'> ]？ <'字体大小'> [ / <'行高'> ]？ <'字体系列'> ]
|标题
|图标
|菜单
|消息框
|继承

我认为上面列出的粗体部分是一个选项，“标题”、“图标”、“菜单”、“消息框”和“继承”是其余选项。

简而言之，请尝试： font：bold 10px/13px

更新：

看来 webkit 对于这个问题有一个突出的错误报告。不确定火狐浏览器。 (https://bugs.webkit.org/show_bug.cgi?id=20181)

此外，正如票证中的某人提到的，2.1 规范解决了这个问题：

“简写属性采用子属性值列表或值‘继承’。不能将‘继承’与其他子属性值混合，因为不可能指定应用“继承”的子属性 许多速记属性的定义不强制执行此规则：“border-top”、“border-right”、“border-bottom”、“border-left”、“border”。 '、'背景'、'字体'、'列表样式'、'提示'和'轮廓'。”

http://www.w3.org/TR/CSS21/changes.html#q142

Answer 2

根据标准，您不能使用继承以及 font 复合样式中的其他选项。

必须指定 font-size 和 font-family 值（如果您不使用任何根本不使用它们的表单）。

所以，你不能用它只设置粗细、大小、行高，而是继承家族。

Answer 3

很明显，关键字inherit 会带来麻烦。 也许是因为CSS试图让它工作，即使你没有遵循规定的选项顺序（似乎并非如此，因为不同的顺序也不起作用）并且它无法决定什么指令确实继承属于。

如果您显式设置字体系列，则效果很好：font：bold 10px/13px serif;

Answer 4

我的解决方案如下（在为您的网站使用大型复合字体系列声明时创建尽可能少的 CSS 开销）：

.my-class {
  font: bold 1.167em/2 Helvetica;
  font-family: inherit;
}

• 在 FF 中进行测试（并工作），我遇到了上述问题。

Answer 5

不。

字体简写属性是

font: 12px normal Arial;

字体简写是大小、粗细、字体样式。字体中的行高是 css 中的一个非常非常新的功能，我还不建议使用它。只需添加

line-height: 13px;

单独包含行高并没有真正的额外努力，直到它是跨浏览器，包括速记字体的行高，我根本不会使用它。