<p>Цей приклад показує як працює властивість <code>font-variant-numeric</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення цифр нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>
<div class="inputs">
<input id="normal" checked name="font-variant-numeric" type="radio"/>
<label for="normal">normal</label>
<message for="normal">Без задання. Використовуються стандартні гліфи.</message>
<input id="slashed-zero" name="font-variant-numeric" type="radio"/>
<label for="slashed-zero">slashed-zero</label>
<message for="slashed-zero">Це ключове слово призводить до використання нуля з перекресленням.</message>
</div>
<p id="message">Без задання. Використовуються стандартні гліфи.</p>
<hr>
<p id="block"><span>0000</span></p>
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: 'Helvetica';
}
#block {
font-size: 7em;
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-numeric', $(this).attr('id'));
});
This Pen doesn't use any external CSS resources.