【发布时间】：2017-02-01 23:29:52
【问题描述】：
对于这么简单的问题，我深表歉意，但我已经有好几年没有真正不得不玩 CSS 了，经过一整天的测试，这让我无法理解。感谢您的帮助。
问题是关于字体特征继承的简写与简写 CSS 声明。经过大量测试，我无法让 Roboto (100, 300) 真正工作。无论 div 是否嵌套，一个字体粗细总是覆盖另一个。当用速记编写时，Open Sans 也失败了，但使用速记对单个和嵌套 div 效果很好。这是怎么回事？ （将 font-family 和 font-size 结合起来，例如：“font: 32px san-serif;”似乎也受到尊重）。
这种 CSS 格式适用于单个和嵌套的 div，唯一的变化是 Formal/Longhand 字体、粗细和颜色。
.div-1 {
font: 32px 'Open Sans', sans-serif;
color: #333;
font-weight: 300;
width: 800px;
padding: 10px;
margin: 10px;
border: 1px solid #333;serif
}
此简写 CSS 格式失败，字体声明中包括粗细或颜色：
.div-1 {
font: 32px #333 300 'Open Sans', sans-serif;
width: 800px;
padding: 10px;
margin: 10px;
border: 1px solid #333;serif
}
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto' rel='stylesheet'>
<link rel='stylesheet' type='text/css' href="../test.css">
</head>
<body>
<div class="div-1">This is Div-1 text</div>
<div class="div-2">This is Div-2 text</div>
<div class="div-3">This is Div-3 text</div>
<div class="div-3">This is Div-3 text
<div class="div-1">This is Div-1 text</div>
<div class="div-2">This is Div-2 text</div>
</div>
</body>
</html>
【问题讨论】：
-
感谢大家的快速反应——救了我的培根。看来我在编码中犯了两个错误。下面buidingsramen的回应是正确的，让我走到了一半。另一个问题似乎是我必须在谷歌字体请求中询问特定的字体粗细。我问了 Roboto，假设我会得到全系列的重量 - 没用。在 HTML 中包含特定的权重变体（错过了一个逗号并且没有抓住它，这对原因没有帮助！）在删除字体颜色并将权重放在首位的额外帮助下完成了这项工作。