问题描述
我正在构建一个应用程序，人们可以在其中创建横幅，并且我有一个字体列表。此列表包含网络安全字体、自定义字体和谷歌字体。 对于每个文本元素，用户可以选择一种字体。
对于每个选定的字体，我需要将引用谷歌字体的链接附加到头部，或者添加一个带有 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 这样的包。情绪？
感谢您的帮助