Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/388.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何使用javascript获得可变字体轴?_Javascript_Fonts - Fatal编程技术网

如何使用javascript获得可变字体轴?

如何使用javascript获得可变字体轴?,javascript,fonts,Javascript,Fonts,我正在开始一个编辑器的工作,该编辑器允许您使用,但有一个非常简单的问题困扰着我: 可变字体具有可变轴,允许您修改字体的视觉属性。一个简单的例子是重量,它允许你从轻到黑的重量,例如 问题是我事先不知道字体中有哪些变化轴,因此无法动态显示字体的正确滑块 javascript中是否有编程方法来查找可变字体的变化轴? 你问我试过什么?嗯,我建造了这个: 相关代码如下: input.addEventListener("input", function(){ text.style["f

我正在开始一个编辑器的工作,该编辑器允许您使用,但有一个非常简单的问题困扰着我:

可变字体具有可变轴,允许您修改字体的视觉属性。一个简单的例子是重量,它允许你从轻到黑的重量,例如

问题是我事先不知道字体中有哪些变化轴,因此无法动态显示字体的正确滑块

javascript中是否有编程方法来查找可变字体的变化轴?

你问我试过什么?嗯,我建造了这个:

相关代码如下:

    input.addEventListener("input", function(){
      text.style["font-variation-settings"] = "'wght' " + input.value;
    })
但我真正想解决的是

    var fontAxes = [how?];
    fontAxes.forEach(axis => {
      var input = document.createElement("input");
      // customize input
      input.addEventListener("input", function(){
        // change axis
      })
    })

香草JS?不。字体的原生API非常糟糕。您最好为FVAR信息编写一个小型解析器,或者使用类似opentype.js或fontkit的东西。与此同时,我坐下来重新访问Font.js,此时它将非常高兴地报告ttf/otf、plain/woff/woff2版本(例如,我们刚刚得到
wght
)中变量字体存在哪些轴。这段代码目前在的
重新录制
分支中,但几天后将替换master,因为我添加了对通用表格式的剩余解析,并添加了原始Font.js的文本度量功能。@Mike'Pomax'Kamermans哦,看起来很有希望,我会等待释放,因为我不着急。