font-synthesis в CSS — заборона підробки жирного й курсиву

HTML

<p>Значення без задання.</p>
<p class="no">Відключаємо синтез.</p>

CSS

p {
  font-style: oblique;
  font-size: 2.8em;
}

.no {
  font-synthesis: none;
}

HTML

<p class="syn"><b>Жирний</b> і <i>курсив</i> — синтез дозволено.</p>
<p class="none"><b>Жирний</b> і <i>курсив</i> — синтез заборонено.</p>

CSS

p {
    font-family: cursive;
    font-size: 22px;
}

.none {
    font-synthesis: none;
}

HTML

<div class="pair">
    <p class="one bold">Товщину підроблено: font-weight 700</p>
    <p class="one bold nosyn">Заборонено: font-synthesis none</p>
</div>

<div class="pair">
    <p class="one ital">Курсив підроблено: font-style italic</p>
    <p class="one ital nosyn">Заборонено: font-synthesis none</p>
</div>

<div class="pair">
    <p class="one caps">Капітель підроблено: small-caps</p>
    <p class="one caps nocaps">Заборонено: font-synthesis-small-caps none</p>
</div>

<div class="pair sys">
    <p class="bold">Системний шрифт, жирний справжній</p>
    <p class="bold nosyn">Той самий, із font-synthesis: none</p>
</div>

CSS

@font-face {
    font-family: OneFace;
    src: local("DejaVu Sans"), local("Liberation Sans"), local("Arial"),
         local("Helvetica Neue"), local("Roboto"), local("Segoe UI");
    font-weight: 400;
    font-style: normal;
}

.pair {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    padding: 8px;
    background: #eef1f5;
    border-left: 4px solid #2f6fd0;
}

.pair p {
    flex: 1 1 260px;
    margin: 0;
    font-size: 20px;
}

.sys {
    border-left-color: #8a94a6;
}

.sys p {
    font-family: system-ui, sans-serif;
}

.one {
    font-family: OneFace, sans-serif;
}

.bold {
    font-weight: 700;
}

.ital {
    font-style: italic;
}

.caps {
    font-variant-caps: small-caps;
}

.nosyn {
    font-synthesis: none;
}

.nocaps {
    font-synthesis-small-caps: none;
}

HTML

<p>Цей приклад показує як працює властивість <code>font-synthesis</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>

<div class="inputs">
  <input id="none" checked name="font-synthesis" type="radio"/>
  <label for="none">none</label>
  <message for="none">Заборонити всі синтетичні обличчя.</message>
  
  <input id="weight" name="font-synthesis" type="radio"/>
  <label for="weight">weight</label>
  <message for="weight">Вказує, що браузеру дозволено синтезувати жирний текст.</message>
    
  <input id="style" name="font-synthesis" type="radio"/>
  <label for="style">style</label>
  <message for="style">Вказує, що браузеру дозволено синтезувати курсивний текст.</message>
</div>

<p id="message">Без задання.</p>

<hr>

<p id="block">Це приклад для демонстрації дії властивості.</p>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 3.5em; 
  text-align: center;
  font-synthesis: none;
}

message {
  display: none;
}

JS

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('font-synthesis', this.id));

}));