<link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>

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

<div class="inputs">
  <input id="normal" checked name="font-variant-east-asian" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Без задання. Використовуються лігатури.</message>
  
  <input id="proportional-width" name="font-variant-east-asian" type="radio"/>
  <label for="proportional-width">proportional-width</label>
  <message for="proportional-width">Активізує набір фігур, де всі цифри різних розмірів.</message>
  
  <input id="ruby" name="font-variant-east-asian" type="radio"/>
  <label for="ruby">ruby</label>
  <message for="ruby">Це ключове слово зумовлює використання спеціальних гліфів для рубінових символів.</message>
  
  <input id="traditional" name="font-variant-east-asian" type="radio"/>
  <label for="traditional">traditional</label>
  <message for="traditional">Значення контролює відображення альтернативних гліфів.</message>
  
</div>

<p id="message">Без задання. Використовуються лігатури.</p>

<hr>

<p id="block">「日本語」の文字詰め！カナ</p>

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

body {
  font-family: 'Fira Sans', sans-serif;
}

#block {
  font-size: 40px; 
  line-height: 1;
  margin-top: 0;
  text-align: center;
}

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-variant-east-asian', $(this).attr('id'));
  
});