<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&amp;subset=cyrillic" rel="stylesheet"> 

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

<div class="inputs">
  <input id="normal" checked name="font-weight" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Нормальний шрифт. Значення без задання.</message>
  
  <input id="bold" name="font-weight" type="radio"/>
  <label for="bold">bold</label>
  <message for="bold">Жирні символи.</message>
  
   <input id="100" name="font-weight" type="radio"/>
  <label for="100">100</label>
  <message for="100">Найбільш тонкий.</message>
  
  <input id="200" name="font-weight" type="radio"/>
  <label for="200">200</label>
  <message for="200">Супер тонкий текст.</message>
  
  <input id="300" name="font-weight" type="radio"/>
  <label for="300">300</label>
  <message for="300">Тонкий</message>
  
  <input id="400" name="font-weight" type="radio"/>
  <label for="400">400</label>
  <message for="400">Нормальний.</message>
  
  <input id="500" name="font-weight" type="radio"/>
  <label for="500">500</label>
  <message for="500">Середній.</message>
  
  <input id="600" name="font-weight" type="radio"/>
  <label for="600">600</label>
  <message for="600">Напівжирний.</message>
  
  <input id="700" name="font-weight" type="radio"/>
  <label for="700">700</label>
  <message for="700">Жирний.</message>
  
  <input id="800" name="font-weight" type="radio"/>
  <label for="800">800</label>
  <message for="800">Супер жирний.</message>
  
  <input id="900" name="font-weight" type="radio"/>
  <label for="900">900</label>
  <message for="900">Найбільш жирний.</message>
</div>

<p id="message">Нормальний шрифт. Значення без задання.</p>

<hr>

<p id="block">Це текст</p>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: 'Helvetica';
}

#block {
  font-size: 7em; 
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js