What is the best way to replace text with replace( )?

Question

JavaScript

Hello!
While studying the method replace( ), I came across an unusual (for me, an example):

<p class="test">
  hello from this string
</p>

document.write(document.querySelector('.test').innerHTML.replace(/from/gi, m => `<font style: color="red">${m}</font>`));

The section of code that interests me is <font style: color="red">, earlier, if I needed to replace something, I used a construction like <span style="background: red;"></span>! I apologize for probably a banal question, but what kind of design is this (which is interesting to me)? What is this method of adding styles? Does it have any advantages (in your opinion)? Well, if you are too lazy to paint, just tell me where you can find an article about adding styles to the text using these tags <font style: . . ., are there any other options besides <font style . . ., i.e. if in the case of the span it is clear to me, BUT the object <font. . .is not clear to me as an element of the house of the tree!