Блог

Ни за что на свете я не могу найти документацию, объясняющую, что слово «Отображение» делает в следующем css:

 h1 {
  font: 3em 'Display'  
}
 

Согласно этому сообщению о свойстве css font

http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

размер и семейство шрифтов являются обязательными, иначе правило игнорируется.

Я думал, что это должно быть встроенное семейство шрифтов или что-то в этом роде, но посмотрите на эту корзину, которую я создал:

http://jsbin.com/yuhaw/1/edit?html ,css,вывод

HTML

   <h1 class="test1">font: 3em 'Display' </h1>
  <h1 class="test2">font: 3em</h1>
  <h1 class="test3">  font-size: 3em;font-family: 'Display' </h1>
 

CSS

 h1.test1 {
  font: 3em 'Display'  
}

h1.test2 {
  font: 3em  
}

h1.test3 {
  font-size: 3em;
  font-family: 'Display'  
}
 

Если бы это было так, я бы ожидал, что test1 и test3 будут выглядеть одинаково, но это не так. Что здесь происходит?

В правиле h1 { font: 3em 'Display' } 'Display' часть указывает имя семейства шрифтов. Это делает правило синтаксически допустимым, тогда как, если оно опущено, правило синтаксически недопустимо и полностью игнорируется. Здесь не имеет значения, действительно ли в системе есть семейство шрифтов с именем Display . Вероятно, это не так, и тогда браузер использует некоторые резервные шрифты, обычно это шрифт по умолчанию.

По определению font сокращения, это правило устанавливает для всех свойств шрифта их начальные значения, если только для них не указано значение в правиле. Для So font-size устанавливается значение 3em и font-family Display , а для всех других свойств шрифта — их начальные значения, как указано в спецификациях CSS. Для font-weight , начальное значение равно normal , поэтому правило переопределяет обычное и рекомендуемое значение браузера по умолчанию, для которого установлено font-weight значение bold for h1 .

Как уже упоминалось, правило h1 { font: 3em } игнорируется (спецификациями CSS и в практике браузера), поэтому элемент отображается с настройками по умолчанию (жирным шрифтом и обычно 2em размером).

Правило h1.test3 { font-size: 3em; font-family: 'Display' } действительно и применяется, но оно влияет только на два определенных свойства шрифта, которые оно устанавливает. Это означает, что font-weight есть bold .

Примечание: наследование не имеет к этому никакого отношения. Это просто вопрос настройки свойств элемента в таблице стилей автора и в таблице стилей браузера по умолчанию. И ключевой проблемой здесь является эффект свойства font shorthand.

Причина, по которой они не совпадают, заключается в том, что для Test3 вы наследуете все свойства, которые вы явно не задаете. Все существующие стили сохраняются, и вы меняете только размер и семейство.

Поэтому Test3 выделен жирным шрифтом, что является стилем браузера по умолчанию для H1.

Test1 представляет собой полное объявление шрифта и сбрасывает каждое неопределенное свойство на шрифт по умолчанию. Вот почему Test1 имеет вес шрифта normal . Вы перезаписываете каждое свойство шрифта, указывая «полное» объявление шрифта, поэтому размер и семейство устанавливаются на указанное значение, а вес сбрасывается на normal значение, которое используется браузером по умолчанию для шрифта.

В вашем браузере (по крайней мере, в Chrome) вы можете проверить Computed style . В этом представлении вы также можете проверить View inherited properties . Если вы сделаете это в своей скрипке, вы сможете сравнить все свойства шрифта, и вы заметите эти различия.

Вы можете попробовать. Например, Google Chrome поможет вам увидеть вычисленные стили, используя эту нотацию.

 element.style {
   font: 3em 'Display';
   font-family: Display;
   font-size: 3em;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: normal;
}
 

Согласно документации, вы можете указать все свойства шрифта в одном объявлении, используя следующие обозначения :

font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; .

такого шрифта с именем «Display» не существует

вы должны загрузить otf на свой веб-сервер и включить его таким образом:

 @font-face {
  font-family: "Display";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }