Что означают эти свойства шрифта 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

Просто обновлено с конкретными вопросами. – Dan

[Значение косой черты] (http://stackoverflow.com/questions/701732/size-in-css-with-slash) – misterManSam

Что вы видите, это сокращенное обозначение шрифта. Это, по существу, такой же, как писать следующее:

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

Почему говорят «нормальный нормальный жирный»?

Это стиль шрифта, за которым следует шрифт-вариант, за которым следует шрифт-вес. Другим примером может быть что-то вроде italic small-caps bold.

Почему есть косая черта на размер шрифта?

Это размер шрифта, за которым следует линия-высота. В вашем примере размер шрифта 36 пикселей, а высота линии - 54 пикселя.

Почему существуют три типа шрифтов?

Это называется стеком шрифтов. Браузер попытается использовать эти шрифты в том порядке, в котором они записаны. Если brandon-grotesque-n7 недоступно в системе пользователя, браузер вернется к использованию brandon-grotesque. Если он недоступен, он будет использовать шрифт по умолчанию sans-serif.

Полезный шпаргалка для шрифта стенографии: enter image description here