<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>

* {
  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;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('#block').css('font-synthesis', $(this).attr('id'));
  
});