How does @font-face work?

Question

css

@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;
  }

Do I understand correctly that the font-weight, font-style properties are parameters or selectors that determine the choice of font by the browser?
Is it true that if you write

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

then the font from the cmunsi.ttf file will be used, but in such a construction cmunbxo.ttf will be used?
<i><b>Текст</b></i>

Answer 1

@font-face essentially allows you to add a font to use.
True if the font is specified in the selector for the element, or its parent.

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

And it is still desirable to separate CSS rules from HTML

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

will look neater and easier to work with (you only change styles in CSS, and only markup in HTML)