Javascript 基于用户输入从文件中动态加载字体

我为我们公司的一个应用程序构建了一个小型样式模拟器，这样设计师就可以快速检查我们应用程序的颜色选项/边框样式等。 我主要使用css变量，这些变量在通过config JSON中的颜色选择器/adapt值调整颜色时会发生变化

设计者应该能够在JSON中测试不同的字体样式，但我不能让它与本地字体文件一起工作

如何实现从本地文件夹加载本地字体？我想实现这一点，使生活中的差异可以看到，当输入不同的字体

只是在ExanpleCourier中加载“Courier”作为系统字体工作，但当我想从文件夹加载它时，它不工作

这就是我将字体加载到CSS变量中的方式（get值只是提供了一个访问JSON的安全方法）

JS

$(":root")[0].style.setProperty("--regularFont", "/fonts/" + getValue(parsedConfig,['configs', 0, 'styleSheet', 'fonts', 'regularFont'],"") + ".tff");
      $(":root")[0].style.setProperty("--boldFont", "/fonts/" + getValue(parsedConfig,['configs', 0, 'styleSheet', 'fonts', 'boldFont'],"") + ".tff");

JSON：

"fonts": {
      "regularFont": "Arial",
      "boldFont": "AvenirNext-Bold"

CSS

@font-face {
  font-family: sans-serif; 
  font-family: regularFont;
  src: local(var(--regularFont)),
       url(var(--regularFont));
}

@font-face {
  font-family: sans-serif; 
  font-family: boldFont;
  src: local(var(--boldFont)),
       url(var(--boldFont));
       font-weight: bold;
}

/* example Styling */
.card {
    font-family: regularFont;
}

---

您可以使用

文件中的数据创建
FontFace
对象，并将其添加到文档的
FontFaceSet
：


const fontInput=document.getElementById（“字体输入”），
test=document.getElementById（“test”）；
让字体；
addEventListener（“输入”，异步（）=>{
如果（字体）
文档。字体。删除（字体）；
const data=wait fontInput.files[0].arrayBuffer（）；
font=新字体面（'test-font'，数据）；
等待font.load（）；
document.font.add（字体）；
test.style.fontFamily=`test font`；
});

上传字体以更改我
 
谢谢，看起来很有希望，我会试试看