人々がバナーを作成できるアプリケーションを構築しており、フォントのリストがあります。このリストには、Web セーフ フォント、カスタム フォント、Google フォントが含まれています。テキスト要素ごとに、ユーザーはフォントを選択できます。
この選択したフォントごとに、Google フォントを参照するリンクを head に追加するか、当社がホストしているカスタム フォントを参照する font-face を含むスタイル タグを追加する必要があります。全体として、リストには 1000 を超えるフォントが含まれています。
だから私は追加したいカスタムフォントのために
<style>
@font-face {
font-family: "somefamily";
font-style: normal;
font-weight: 400;
src: url("https:someurl.ttf")
}
</style>
および各Googleフォントについて
<link href="https://fonts.googleapis.com/css?family=somefamily:400,600,700,800" rel="stylesheet" type="text/css">
Reactヘルメットで動作させようとしましたが、それがうまくいくとは思わないか、少なくとも動的にすることができなかったため、選択したフォントのリンクまたはスタイルタグのみが表示されます.
私も webfontloader を試しましたが、それはフォントを積み重ねています。
JS でタグを作成し、それを head に追加する場合も同様です。
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で、ユーザーが新しいフォントを選択するたびに積み重ねられる googlefonts を使用して小さな例を作成しました。
以前のフォントを保持せずに、ユーザーが選択したフォントを動的に取得する方法はありますか? fex のようなパッケージを使用して、代わりに css として追加することは可能ですか? 感情？
ご協力ありがとうございました