React - 如何检查特定字体是否已加载？

Question

假设我的字体如下：

@font-face {
    font-family: 'MyGreatFont';
    src: url(~"./font/greatfont.woff2") format('woff2'),
        url(~"./font/greatfont.woff") format('woff');
    font-weight: 600;
    font-style: normal;
}

在我使用它的地方，我会做类似的事情font-family: 'MyGreatFamily', san-serif：

为了避免出现无样式文本的闪烁，特别是在下载速度较慢的设备上，我希望将后备字体设置为与网络字体不同的样式。

为此，我有几个问题。我已经阅读了一些关于document.fonts及其方法、check和ready的内容onloadingdone。

首先，我不太确定要给出什么参数，document.fonts.check以便在页面完全加载后返回 true。我已经尝试过check('MyGreatFont')，，，甚至尝试了字体大小的计算值check('600 MyGreatFont')：。check('1em MyGreatFont')check('19.2px MyGreatFont)

全部返回false（这是不正确的，因为我知道我的页面已完全加载并应用了正在应用的网络字体）或错误：Uncaught DOMException: Failed to execute 'check' on 'FontFaceSet': Could not resolve 'Niche' as a font.

其次，由于我在一个页面上可能有多种网络字体，因此我想在特定网络字体可用时应用我的特殊样式。有没有办法做到这一点？

到目前为止，我有：

const MyPageComponent = () => {
    const [webFontsLoaded, setWebFontsLoaded] = useState(false)

    useEffect(() => {
        async function areFontsReady() {
            await (document as any).fonts.ready
            setWebFontsLoaded(true)
        }

        areFontsReady()
    })

    return (
        <div className={`${webFontsLoaded ? 'web-fonts-styling' : 'fallback-font-styling'}`}>
            Content here
        </div>
    )
}

但这样做的作用是，当 Web 字体未加载时，它会正确应用后备样式，但当 Web 字体加载并渲染到屏幕时，它会继续应用后备样式！只有在加载所有字体后，样式才会发生变化。这是可以预料的，因为我正在使用该document.fonts.ready函数。

有没有办法重复调用该check函数（使用正确的参数！）以便我知道何时切换样式？

注意：我更愿意在不使用第三方库（包括 JQuery、Font Face Observer 等）的情况下实现此行为

Answer 1

我认为观察@font-faceCSS 之外的最好方法是使用 javascript。查看这个小型库fontfaceobserver以及此博客以了解更多改进您的应用程序首先加载的内容...。

另外，如果您正在使用 React，请确保使用useLayoutEffect，因为在其他钩子中，例如useEffect字体已经加载并准备就绪，您应该能够在react其自身之前访问它。