如何使用Javascript更改@font-face源代码？

我正在为设计师开发一个简单的工具，在这个工具中，用户可以输入一些文本，然后通过各种字体生成，以找到适合他们项目的最佳选择

我正在努力寻找加载字体的最佳方式。显然，我并不想一次加载所有字体，所以我只需要在生成字体后加载字体。使用@font-face CSS规则是理想的，但我似乎不知道如何使用Javascript更改字体的src

现在，我的方法是使用GoogleFonts，在这里你可以加载带有css链接的字体，比如。然后我可以使用Javascript更改该链接的href，该链接以新字体加载。但这种方法限制了我只使用谷歌字体，而能够加载本地网页字体、TypeKit字体等则是理想的选择

---

是否有人对加载字体的最佳方式或如何使用Javascript访问CSS中的@font-face规则有任何建议？

设置一个控制字体的样式表，使用一个id可以让您随意删除和重建字体。例如：

function setFontTo(fontName) {
  const styleId = 'font-style-sheet';

  // Get a reference to the current in-use stylesheet, if there is one.
  var fontStyleSheet = document.getElementById(styleId);

  // Then define a new stylesheet with an updated @font-face rule:
  var newFontStyleSheet = document.createElement("style");
  newFontStyleSheet.id = styleId;
  newFontStyleSheet.textContent = `
    @font-face {
      font-family: 'main-dynamic-font';
      src: url(assets/fonts/${fontName}.woff) format('woff');
    }
  `;

  // Then we swap: add the new rule first, then remove the old one.
  // That way you don't get a flash of unstyled text.
  document.head.appendChild(newFontStyleSheet);

  if (fontStyleSheet) {
    fontStyleSheet.parent.removeChild(fontStyleSheet);
  }
}

然后确保在CSS文件/包中定义一个使用该字体的类，例如：

.main-content {
  font-family: 'main-dynamic-font', serif;
}

然后在标记中，将该类用于任何需要使用用户选择字体设置文本样式的元素：

<div class="main-content blah blah ...">
  ...
</div>

---

此演示通过一些单选按钮与用户交互。每个单选按钮都对应于Google字体中的字体系列。如果您在离开页面时丢失了样式，则注释掉的部分将无法处理更改样式的问题。它在这里不起作用，但在正常情况下，它会在不太严格的环境中保存您的更改

工具书类

演示 //document.onDOMContentLoaded=init； var form=document.forms.font； form.addEventListener'change'，fontInput； 函数输入{ var fc=形式元素； var fam=['Montserrat'、'Roboto'、'Open Sans'、'Raleway'、'Quicksand']； var idx=parseIntfc.font.value，10； var family=`${fam[idx]}`； 变量url=`https://fonts.googleapis.com/css?family=`; var-fontUrl； 如果e.target.name=='font'{ var famFont=family.replace/\s/g，`+`； fontUrl=`${url}${famFont}`； document.getElementById'link'.href=fontUrl； console.logfontUrl； //setItem'fontUrl'，fontUrl； } CSSVAR1家族； e、 停止传播； } 函数cssVARstr{ var root=document.documentElement root.style.setProperty'-fam'，str； 返回false； } /* 函数初始化{ var saved=localStorage.getItem'fontUrl'； 如果！得救了{ localStorage.setItem'fontUrl'，'https://fonts.googleapis.com/css?family=Open+无； document.getElementById'link'.href='1https://fonts.googleapis.com/css?family=Open+无； }否则{ document.getElementById'link'.href=已保存； } } */ ：根{ -法姆：雷威； } .作为控制台包装{ 宽度：40%； 左缘：60%； 最大高度：60px； } .作为控制台行：之后{ 显示：无； } 身体{ 字体系列：var-fam； } 字体{ 字体系列：Consolas； 字体大小：13px； } 字体系列 蒙特塞拉特 机器人 开放式SAN 雷威 流沙 动态CSS 月亮的脸在阴影中

《太空船先生》，菲利普·K·迪克著

<select id="font-picker">
  <option value="roboto-regular">Roboto (regular)</option>
  ...
</select>

fontSelector = document.getElementById("font-picker");
fontSelector.addEventListener("change", evt => {
  // read the selected value, and then call the font swap function here.
});