是否可以加载可变字体并使用 javascript 操作它们？答案

【问题标题】：Is it possible to load variable fonts and manipulate them with javascript?是否可以加载可变字体并使用 javascript 操作它们？
【发布时间】：2017-10-21 03:49:44
【问题描述】：

在 Chrome 62 中，可变字体现在默认启用。 Demos exist 如果字体安装在浏览器的操作系统中，则显示它们能够操作字体，但如果它们是从页面内加载的，我无法执行相同的操作。

例如，以下 CSS 能够加载“Decovar”字体：

@font-face {
  font-family: 'Decovar';
  src: url('//rawgit.com/TypeNetwork/fb-Decovar/master/fonts/DecovarAlpha-
VF.ttf') format('truetype');
}

字体在页面中正确呈现。然而，将fontWeight 设置为100 的不是倍数的值应该显示连续的权重变化，只显示旧的量化权重（即300、400、500 等）。 ..)。设置 'fontVariationSettings' css 样式规则没有任何作用。

Here's a codepen 证明了这一点。

这里有什么我遗漏的吗？还是可变字体仅限于本机安装的字体？

【问题讨论】：

标签： html css google-chrome fonts

【解决方案1】：

当我下载 Decovar 并将其拖到该 axis-praxis.org 页面上时，它显示 Weight 的属性名为 WMX2。设置这种变化对我有用。

let input = document.querySelector('input');
let p = document.querySelector('p');

input.addEventListener('input', e => {
  p.style.fontVariationSettings = `'WMX2' ${input.value}`
});

@font-face {
  font-family: "Decovar";
  src: url("https://rawgit.com/TypeNetwork/fb-Decovar/master/fonts/DecovarAlpha-VF.ttf") format("truetype");
}

p {
  font-family: "Decovar";
}

<input type=range min=0 max=1000>
<p>hamburgefonstiv

【讨论】：