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

Question

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

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

现在，我的方法是使用 Google 字体，您可以在其中使用像 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 这样的 css 链接加载字体。 .然后我可以使用 Javascript 更改该链接的 href，它以新字体加载。但是这种方法限制我只能使用 Google 字体，而能够加载本地网络字体、TypeKit 字体等是理想的。

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

Answer 1

设置一个控制字体的样式表，并使用一个 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>

最后，您确保您的字体选择器允许用户选择字体名称，作为值，映射到实际的字体文件名(并且您确保始终使用 woff):

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

带有该选择器的 js 处理程序。

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