Question

为这么简单的问题道歉，但是经过一整天的测试后，我已经好几年了，因为我真的不得不玩CSS而这就是我的想法。谢谢你的帮助。

问题是速记与关于字体特征继承的慢速CSS声明。经过多次测试，我无法让Roboto（100,300）真正发挥作用。无论div是否嵌套，一个字体权重总是覆盖另一个字体。当用速记书写时，Open Sans也失败了，但是对于单个和嵌套的div使用longhand工作得很好。发生了什么事？（结合font-family和font-size，如：＆＃34; font：32px san-serif;＆＃34;似乎也受到尊重）。

个人和嵌套div的CSS格式，唯一的变化是正式/长手字体，重量和颜色。

.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>

Answer 1

这里有两个不同的问题：

颜色不是font简写的一部分。
字体重量必须在font-size之前。

如果你解决了这个问题，应该可以。

Answer 2

您没有使用font速记的正确语法。有关格式正确的速记规则的示例，请参阅mdn documentation。

＆＃13;

.div-1 {
    font: bolder 32px 'Open Sans', sans-serif; 
    color: #333;
    width: 800px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
}

＆＃13;

<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>
<div class="div-1">This is Div-1 text</div>
<div class="div-2">This is Div-2 text</div>

＆＃13;

Answer 3

这些是font简写的可接受属性：

（请注意color不在列表中。）

font-style
font-variant
font-weight
font-size
line-height
font-family

以下是允许的属性顺序：

首先（以任何顺序）：

font-style和/或font-variant和/或font-weight或没有

第二

font-size

第三

line-height或者没有

第四：

font-family

第五：

其他不太受欢迎的酒店（见下面的链接）

https://www.w3.org/TR/CSS22/fonts.html#font-shorthand

字体速记属性不起作用，但是手写属性可以。为什么呢？

3 个答案: