自定义 TTF 字体在 React 应用程序中加载缓慢

Question

我正在尝试在我的 React 应用程序中包含自定义字体（使用 create-react-app 制作）。它似乎有点工作，但只在加载页面后 2-3 秒后。在此之前，文本似乎使用浏览器的默认字体（如 Times New Roman），然后在几秒钟后切换为自定义字体。有人可以向我解释为什么会发生这种情况以及我需要做什么来解决这个问题吗？

我将字体导入到我的顶级App.js文件中，如下所示：

import './fonts/tarrgetital.ttf';
import './App.scss';

并在我的文件中声明它，App.scss如下所示：

@font-face {
    font-family: 'tarrgetital';
    src: local('tarrgetital'), url(./fonts/tarrgetital.ttf) format('truetype');
}

h2 {
    font-family: tarrgetital;
}

Answer 1

加载 Web 字体的延迟是一个预期的行为问题，之所以会发生这种情况，是因为浏览器在检测到带有与字体规则匹配的 CSS 选择器的 DOM 元素时加载字体，并且当 HTML 文件和所有 CSS 文件加载时会发生这种情况已经下载到客户端了。这是一种延迟加载机制。有一些解决方案可以改善这种行为：

• 使用优化的网页字体文件：

  为了获得更好的性能，您可以将TTFfont-face 中的字体文件替换为woff和woff2文件格式。这些格式采用 gzip 进行压缩，从而减少了文件大小并缩短了客户端的初始下载时间。如果这些格式不可用，您可以使用许多在线工具之一来转换字体文件（谷歌 TTF to woff2）。

• 网络包预加载：

  在 webpack 4.6.0+ 中，您可以预加载模块。这使用preloadHTML 链接标签 ( <link rel="preload">) 中的提示。它会告诉浏览器在下载其余资源之前预加载资源。要使用此选项，请在此处替换import './fonts/tarrgetital.ttf';为import(/* webpackPreload: true */ './fonts/tarrgetital.ttf'); More on webpack preload： https: //webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules以及有关 HTML 预加载提示的更多信息：https: //developer.mozilla.org /en-US/docs/Web/HTML/Preloading_content