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

2018-07-04 08:15:42

对于这样一个简单的问题抱歉，但是我真的必须在CSS中玩，并且经过了一整天的测试后，这一切都在困扰着我。谢谢你的帮助。

问题是关于字体特征继承的速记与慢速CSS声明 。经过多次测试，我无法让Roboto（100,300）真正的工作。无论div是否嵌套，一个字体重量总是会超过另一个字体重量。当以简写形式写入时，Open Sans也失败了，但是使用longhand进行单独和嵌套div时效果很好。这是怎么回事？（结合font-family和字体大小如：“font：32px san-serif;”似乎也受到尊重）。

这种CSS格式适用于单独的和嵌套的div，唯一的变化是正式/朗格式字体，重量和颜色。

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

这里有两个单独的问题：

颜色不是font缩写的一部分。

如果你解决这个问题应该可以工

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

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

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

这些是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

链接地址: http://www.djcxy.com/p/95641.html

上一篇: The font shorthand property is not working, but longhand properties do. Why?

下一篇: JavaScript mapping touch events to mouse events

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

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