可变字体不使用 mousemove 事件侦听器进行调整

Question

我正在尝试根据鼠标的 clientX 位置调整可变字体。但是我无法让字体响应。

这是我的代码：

const text = document.querySelector('.text');

window.addEventListener('mousemove', (e) => {
  console.log(e);
  text.style.fontVariationSettings = `'wght' 100, 'wdth' ${e.clientX.value}`;
});

如果我console.logtext.style，所有的字段都是"".

Answer 1

e.clientX.value 未定义，因此：

const text = document.querySelector('.text');

window.addEventListener('mousemove', (e) => {
  text.style.fontVariationSettings = `'wght' 100, 'wdth' ${e.clientX}`;
});

<div class="text">Hello World</div>

可变字体不使用 mousemove 事件侦听器进行调整

Variable font not adjusting with mousemove event listener

javascript

css

fonts

dom