Как пользоваться вариативными шрифтами?

Question

Узнал про вариативные шрифты, решил попробовать их и сделать простой input type="range" который бы менял жирноту букв.

Через обычный font-weight и задание семейства шрифтов в css работает, но значения жира дискретны, а как пользоваться font-variation-settings в js не понял, если записать через камел кейс не работает, как подключать шрифты через @font-face тоже не понятно, указал путь до файла шрифта и формат - шрифт вообще не применяется.

text1 = document.querySelector("#variative>textarea");
w1 = document.querySelector('#variative>input[type=range]');

w1.addEventListener("change", function(e) {
  text1.style.fontVariationSettings = 'wght ' + w1.value;
});

@font-face {
  font-family: 'Roboto Slab';
  src: url("RobotoSlab-VariableFont_wght.ttf") format("woff2");
}

<div id="variative">
  <input type="range" min="100" max="900" value="400">
  <textarea cols="40" rows="2">Lorem ipsum</textarea>
</div>

Answer 1

Может css?

@media (max-width: 4096px) {
h1,
.h1 {
    font-size: calc(1.375rem + 1.5vw);
}
h2,
.h2 {
    font-size: calc(1.325rem + 0.9vw);
}
h3,
.h3 {
    font-size: calc(1.3rem + 0.6vw);
}
h4,
.h4 {
    font-size: calc(1.275rem + 0.3vw);
}
..........}

Answer 2

text1.style.fontVariationSettings = 'wght ' + w1.value;

text1.style.fontVariationSettings = "'wght' " + w1.value;

var text1 = document.querySelector("#variative>textarea");
var w1 = document.querySelector('#variative>input[type=range]');

w1.addEventListener("change", function(e) {
  text1.style.fontVariationSettings = "'wght' " + w1.value;
});

@font-face {
  font-family: 'Roboto Slab';
  src: url("RobotoSlab-VariableFont_wght.ttf") format("woff2");
}

<div id="variative">
  <input type="range" min="100" max="900" value="400">
  <textarea cols="40" rows="2">Lorem ipsum</textarea>
</div>

PS: На mdn утверждается, что можно использовать font-weight с соответствующим значением. Хотя, я бы на всякий случай фоллбэк с нормальным ещё повесил.

БЛОГ НА HUSL

Как пользоваться вариативными шрифтами?

Ответы (2 шт):