Атрибут face тега <basefont> — гарнітура шрифту сторінки

HTML

<p class="head">1. basefont — не змінює нічого</p>
<div class="blok bad">
    <basefont face="Courier New, monospace" size="6" color="#c0392b">
    <p>Цей абзац іде одразу після basefont. Гарнітура, розмір і колір лишилися
       типові — так, ніби теґа в розмітці немає.</p>
</div>

<p class="head">2. font із тими самими атрибутами — змінює все</p>
<div class="blok">
    <font face="Courier New, monospace" size="6" color="#c0392b">А тут справді
    інша гарнітура, інший розмір і червоний колір.</font>
</div>

<p class="head">3. Одрук у назві шрифту нічим себе не виявляє</p>
<div class="blok">
    <p class="f1">font-family: NemaTakohoShryftu, monospace — видно моноширинний</p>
    <p class="f2">font-family: NemaTakohoShryftu — видно типовий шрифт</p>
    <p class="f3">без font-family — той самісінький типовий шрифт</p>
</div>

<p class="head">4. Так задають шрифт документа сьогодні</p>
<div class="blok good dok">
    <p class="dok-head">Заголовок усередині блока</p>
    <p>Одне правило font-family на контейнері успадковується всім, що всередині:
       абзацам, спискам, комірками таблиць.</p>
    <ul>
        <li>пункт списку</li>
        <li>і ще один</li>
    </ul>
</div>

CSS

.head {
    margin: 18px 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.blok {
    max-width: 520px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.blok p {
    margin: 0 0 6px;
}

.blok p:last-child {
    margin-bottom: 0;
}

.bad {
    border: 2px dashed #d64545;
    background: #fff8f8;
}

.good {
    border: 2px solid #3a9a4f;
    background: #f3fbf4;
}

.f1 {
    font-family: NemaTakohoShryftu, monospace;
}

.f2 {
    font-family: NemaTakohoShryftu;
}

.dok {
    font-family: Georgia, "Times New Roman", serif;
}

.dok-head {
    font-size: 1.2em;
    font-weight: 700;
}

.dok ul {
    margin: 0;
    padding-left: 22px;
}

HTML

<h3>Приклад з використанням атрибуту  <code>face</code></h3>
<basefont face="verdana,arial,sans-serif">
<p id="a">Метелики – прекрасні лікарі від стресів. В цьому переконані лікарі Стокгольма. У клініках цього міста є оранжереї з метеликами і квітами, де пацієнти успішно проходять курси лікування від стресів.
</p>

<h3>Приклад без використання атрибуту  <code>face</code></h3>
<p>Метелики – прекрасні лікарі від стресів. В цьому переконані лікарі Стокгольма. У клініках цього міста є оранжереї з метеликами і квітами, де пацієнти успішно проходять курси лікування від стресів.
</p>

CSS

#a {
        font-family: verdana,arial,sans-serif;
      }