问题标签 [webfont-loader]

我目前正在尝试优化我的网站并异步加载字体系列

起初这是一个材料图标的问题，如下图所示

通过在 index.html 中使用 webfontloader 摆脱了这个问题后，我现在遇到了这个错误，这并不容易摆脱

为了尝试解决它，我将指向<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>webfont.js 的 CDN 链接更改为在本地使用npm i webfontloader和加载它，但问题仍然存在。如何让 webfont.js 不被渲染阻塞？

索引.html

我试图弄清楚如何将字体从本地资产或谷歌字体加载到移相器场景中。

在我的游戏中，我在第一个场景（预加载场景）中加载了所有资产，我不想在其他场景的preload功能中加载任何东西。

问题是我的游戏中有多个场景，字体在第一个场景中加载但在其他场景中不可用。

我在 Phaser labs 中尝试了webfontloader插件以及下面的示例。

• https://rexrainbow.github.io/phaser3-rex-notes/docs/site/webfontloader/
• http://labs.phaser.io/edit.html?src=src/game%20objects/text/static/custom%20webfont.js

如何在我的预加载场景中加载字体并在所有其他场景中使用它们？

谢谢。

Lighthouse 认为我的 Roboto 字体加载阻塞了超过一秒钟：

...但我正在加载 Roboto webfontloader：

...如果我执行empty cache and hard reload并检查我的网络选项卡，它似乎显示正在快速加载的字体：

有没有办法让 Lighthouse 检测到字体是以非阻塞方式加载的？

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

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

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

和每个谷歌字体

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

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

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

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

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

谢谢您的帮助

当我运行yarn serve:ssr它时总是显示错误： ReferenceError: window is not defined

这是我的代码：

在此处输入图像描述

在 app.component.ts 中使用它