字體速記屬性不起作用，但是longhand屬性。爲什麼？

對於如此簡單的問題表示抱歉，但經過一整年的測試後，我真的不得不在CSS中玩遊戲已經有好幾年了。謝謝你的幫助。字體速記屬性不起作用，但是longhand屬性。爲什麼？

問題是速記vs關於字體特徵的longhand 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>

來源

2017-02-01 Cardguy

謝謝大家的驚人的快速反應 - 我倖免於難。我的編碼似乎犯了兩個錯誤。以下buidingsramen的迴應是正確的，並讓我在那裏一半。另一個問題似乎是我必須要求Google字體請求中的特定字體權重。我問Roboto，假設我會得到完整的權重系列 - 沒有工作。在HTML中包含特定的重量變體（錯過了逗號，沒有抓住它，這並沒有幫助原因！）做了這項工作與刪除字體顏色和首先把重量的幫助。 – Cardguy

這裏有兩個單獨的問題：

顏色不是font速記的一部分。
字體大小必須在字體大小之前。

如果你解決了這個問題應該可以工作。

來源

2017-02-01 23:45:07 buildingsramen

對於font，您沒有使用正確的語法。請參閱mdn documentation以瞭解正確格式化的速記規則的示例。

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

來源

2017-02-01 23:48:38

這些是font速記的可接受的性質：

（注意color不在列表上。）

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

這裏的permi性質的ssible順序：

首先（以任何次序）：

font-style和/或font-variant和/或font-weight或全無

第二：

font-size

第三：

line-height或沒有

四：

font-family

第五：

其他不太流行的性質（見下面的鏈接）

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

來源

2017-02-01 23:51:08

字體速記屬性不起作用，但是longhand屬性。爲什麼？

回答

相關問題