<p>Цей приклад показує як працює властивість <code>font-feature-settings</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>
<p>У цьому прикладі, ми можемо уввімкнути або вимкнути функцію, яка довзоляє браузеру відображати стандартні лігатури.</p>
<div class="inputs">
<input id="off" checked name="font-feature-settings" type="radio"/>
<label for="off">off</label>
<message for="off">Вимкнено.</message>
<input id="on" name="font-feature-settings" type="radio"/>
<label for="on">on</label>
<message for="on">Уввімкнено.</message>
</div>
<p id="message">Вимкнено.</p>
<hr>
<p id="block">fi</p>
@import url('https://fonts.googleapis.com/css?family=Life+Savers');
* {
box-sizing: border-box;
padding: 0;
}
body {
font-family: sans-serif;
}
#block {
font-size: 7.5em;
text-align: center;
margin-top: 0;
font-family: 'Life Savers', serif;
font-feature-settings: "liga" off;
}
message {
display: none;
}
var $message = $('#message');
$('.inputs').find('input').on('change', function() {
var $messageText = $("message[for='"+$(this).attr('id')+"']")
$message.text($messageText.text());
document.getElementById('block').style.fontFeatureSettings = '"liga" ' + $(this).attr('id');
});
This Pen doesn't use any external CSS resources.