Не присваивается font-weight через font-family?

Question

[Игорь Мясников]

Почему элементу не присваивается значение font-weight вместе с font-family?

<code lang="css">
@font-face {
  font-family: "OpenSansLight";
  font-weight: 300;
  src: url("../fonts/OpenSansLight/OpenSansLight.eot");
  src: url("../fonts/OpenSansLight/OpenSansLight.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSansLight/OpenSansLight.woff") format("woff"), url("../fonts/OpenSansLight/OpenSansLight.ttf") format("truetype"); }


.header {
font-family: "OpenSansLight", sans-serif
}
</code>

Comments

[Сергей delphinpro]

Неправильно.

Правильно:

@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/OpenSansLight/OpenSansLight.woff") format("woff");
  // src конечно добавите все необходимые, просто для краткости здесь один файл
}
@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/OpenSansLight/OpenSansLightItalic.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/OpenSansLight/OpenSansRegular.woff") format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/OpenSansLight/OpenSansItalic.woff") format("woff");
}

/* использование */
.open-sans-light {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}
.open-sans-light-italic {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.open-sans-regular {
  font-family: "Open Sans", sans-serif;
}
.open-sans-italic {
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}

Answer 1

[Negwereth]

Потому что это работает наоборот. @font-face правило применится только если в наборе правил совпадут нужные параметры. То есть, в вашем случае, в классе `header` должно быть указано и `font-family: "OpenSansLight";`
и `font-weight: 300;`.

Тогда к тексту, попадающему под этот класс, будут применены символы из файла шрифта ("../fonts/OpenSansLight/OpenSansLight.eot")