Question

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

例如，以下CSS可以加载＆＃39; Decovar＆＃39;字体：

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

并且字体在页面中正确呈现。但是，将fontWeight设置为不是100的倍数，这应该显示连续的权重变化，只显示旧的量化权重（即300， 400,500等...）。设置＆＃39; fontVariationSettings＆＃39; css样式规则什么都不做。

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

我有什么东西在这里失踪吗？或者可变字体仅限于本机安装的字体？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: