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

【问题标题】：Custom TTF fonts loading slowly in React app自定义 TTF 字体在 React 应用程序中加载缓慢
【发布时间】：2020-04-18 12:09:01
【问题描述】：

我正在尝试在我的 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;
}

【问题讨论】：

标签： css reactjs performance fonts

【解决方案1】：

我也在 index.css 文件中使用 font-face

@font-face {
  font-family: "Avenir";
  src: local("Avenir"),
    url("assets/fonts/AvenirNextLTPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

 &lt;link rel="stylesheet" href="../src/index.css" /&gt;

然后我将 index.css 文件导入 index.html，这对我有用。

【讨论】：

【解决方案2】：

另一种方法是使用webfontloader。它由 Google 和 Typekit 共同开发。

npm i webfontloader

在你的 App.js 文件中添加这个。注意：您仍然需要在 css 文件中维护字体声明。

import WebFont from 'webfontloader';

WebFont.load({
    custom: {
      families: ['tarrgetital'],
    },
  });

【讨论】：

【解决方案3】：

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

使用优化的网络字体文件：

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

Webpack 预加载：

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

【讨论】：