這些CSS字體屬性是什麼意思？

我抓住從網站一些CSS，雖然我有基本的CSS的一個很好的理解我不明白所有樣式/屬性的位置：這些CSS字體屬性是什麼意思？

font: normal normal bold 36px/54px brandon-grotesque-n7, brandon-grotesque, sans-serif;

一些額外的背景下 - 這是CSS的一個標誌，你可以在這裏看到JS Fiddle。

具體來說，我很好奇：

爲什麼會說「正常正常大膽」？
爲什麼字體大小會有斜線？
爲什麼列出三種字體類型？

來源

2014-08-29 Dan

難道你不明白什麼地方？ https://developer.mozilla.org/en-US/docs/Web/CSS/font – j08691 2014-08-29 15:45:47

剛剛更新了具體的問題。 – Dan 2014-08-29 15:47:10

[slash意思]（http://stackoverflow.com/questions/701732/size-in-css-with-slash） – misterManSam 2014-08-29 15:48:00

你所看到的是一種速記字體聲明。它本質上是一樣的書寫以下內容：

font-family: brandon-grotesque-n7, brandon-grotesque, sans-serif; 
font-size: 36px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
line-height: 54px;

爲什麼會說「正常正常大膽」？

這是字體樣式，後跟font-variant，後面是font-weight。另一個例子是類似italic small-caps bold。

爲什麼字體大小會有斜線？

這是字體大小後跟行高。在你的例子中，font-size是36px，line-height是54px。

爲什麼列出了三種字體類型？

這被稱爲字體堆棧。瀏覽器將嘗試按照寫入順序使用這些字體。如果brandon-grotesque-n7在用戶的系統上不可用，則瀏覽器將回退到使用brandon-grotesque。如果不可用，它將使用系統的默認sans-serif字體。

一個有用的備忘單的字體縮寫： enter image description here

速查表來源：http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

來源

2014-08-29 16:00:40

只是讓這個問題有沒有意見的答覆。從CSS-Tricks.com：

CSS font: font-style font-variant font-weight font-size/line-height font-family;

使用 font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

來源

2014-08-29 16:00:57 disinfor

這些CSS字體屬性是什麼意思？

回答

相關問題