0

Узнал про вариативные шрифты, решил попробовать их и сделать простой 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>

2

2 ответа 2

0

Может 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);
}
..........}
1
  • так а подключать то нужно как обычные шрифты или через @font-face? И как в JS сделать плавное изменение толщины?
    – Artyom
    9 мая 2020 в 17:24
0
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 с соответствующим значением. Хотя, я бы на всякий случай фоллбэк с нормальным ещё повесил.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.