The font shorthand property is not working, but longhand properties do. Why?
Apologies for so simple a question, but it's been years since I've really had to play in CSS and this is eluding me, after a full day of testing. Thanks for any help.
The question is shorthand vs longhand CSS declarations regarding font characteristics inheritence . After much testing, I couldn't get Roboto (100, 300) to really work. One font-weight always overrode the other regardless of whether divs were nested or not. When written in shorthand Open Sans also failed, but worked fine using longhand for individual and nested div. What's going on? (Combining font-family and font-size like: "font: 32px san-serif;" seems to be respected also).
This CSS formatting worked for individual and nested divs, with the only changes being Formal/Longhand font, weight and color.
.div-1 {
font: 32px 'Open Sans', sans-serif;
color: #333;
font-weight: 300;
width: 800px;
padding: 10px;
margin: 10px;
border: 1px solid #333;serif
}
This Shorthand CSS formatting failed with either or both weight or color included in font declaration:
.div-1 {
font: 32px #333 300 'Open Sans', sans-serif;
width: 800px;
padding: 10px;
margin: 10px;
border: 1px solid #333;serif
}
HTML Code:
<!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>
There's two separate problems here:
font shorthand. Should work if you fix that.
You're not using the correct syntax for font shorthand. See the mdn documentation for examples of correctly formatted shorthand rules.
.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> These are the acceptable properties of the font shorthand:
(Note that color is not on the list.)
font-style font-variant font-weight font-size line-height font-family Here's the permissible order of properties:
First (in any order):
font-style and/or font-variant and/or font-weight or nothing Second:
font-size Third:
line-height or nothing Fourth:
font-family Fifth:
https://www.w3.org/TR/CSS22/fonts.html#font-shorthand
链接地址: http://www.djcxy.com/p/95642.html上一篇: android web字体不同