Как работает @font-face?

Question

[Евгений Обыкновенный]

@font-face {
    font-family: "Computer Modern";
    src: url('/fonts/cmunbmr.ttf');
  }
@font-face {
    font-family: "Computer Modern";
    src: url('/fonts/cmunbbx.ttf');
    font-weight: bold;
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('/fonts/cmunsi.ttf');
    font-style: italic, oblique;
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('/fonts/cmunbxo.ttf');
    font-weight: bold;
    font-style: italic, oblique;
  }

Правильно ли я понимаю, что свойства font-weight, font-style это параметры или селекторы, которые определяют выбор шрифта браузером?
Верно ли, что если написать

<p style="font-family: 'Computer Modern';  font-style: italic;">Текст</p>

то будет использован шрифт из файла cmunsi.ttf, а в такой конструкции
<i><b>Текст</b></i>
будет использован cmunbxo.ttf?

Answer 1

[Владимир Допустим]

@font-face по сути позволяет добавить шрифт в использование.

Верно, если шрифт указан в селекторе для элемента, или его родителя.

body {
  font-family: 'Computer Modern';
}

И желательно все-таки отделять правила CSS от HTML

<p class="some-class">Текст</p>

.some-class {
  font-family: 'Computer Modern';
  font-style: italic;
}

будет выглядеть аккуратней и с ним легче будет работать (стили меняете только в CSS, а в HTML только разметка)