0

我正在构建一个应用程序，人们可以在其中创建横幅，并且我有一个字体列表。此列表包含网络安全字体、自定义字体和谷歌字体。对于每个文本元素，用户可以选择一种字体。

对于每个选定的字体，我需要在头部附加指向 google 字体的链接，或者添加一个带有 font-face 的样式标签，指向我们托管的自定义字体。总体而言，该列表的字体长度超过 1000 种。

所以对于我想添加的自定义字体

<style>
@font-face {
  font-family: "somefamily";
  font-style: normal;
  font-weight: 400;
  src: url("https:someurl.ttf")
}
</style>

和每个谷歌字体

<link href="https://fonts.googleapis.com/css?family=somefamily:400,600,700,800" rel="stylesheet" type="text/css">

我试图让它与 React 头盔一起工作，但我不认为这是要走的路，或者至少我没有设法让它动态化，所以它只显示所选字体的链接或样式标签。

我也尝试了 webfontloader ，但那个是把字体堆叠在一起。

同样适用于在 JS 中创建标签，然后将其附加到头部

          let url = "https://fonts.googleapis.com/css?family=";
          url += font.name.replace(" ", "+");
          url += ":" + font.weights.join(",");
          url.replace("regular", "400");
          let link = document.createElement('link')
          link.href = url;
          link.rel = "stylesheet";
          link.type =  "text/css";
          document.head.appendChild(link);

在这个代码框https://codesandbox.io/s/billowing-river-khqob?file=/src/App.js我做了一个小例子，每次用户选择新字体时都会堆积起来。

有没有办法动态获取用户选择的字体而不保留以前的字体？是否有可能以某种方式将其添加为 css 而不是使用 fex 之类的包。感情？

谢谢您的帮助

4

1 回答 1

0

最后我解决了它使用

https://github.com/planttheidea/react-style-tag

和

https://github.com/jakewtaylor/react-google-font-loader

于 2021-02-19T08:30:35.870 回答