自定义 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 文件都已下载到客户端时，就会发生这种情况。这是一种延迟加载机制。有一些解决方案可以改善此行为：

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

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

---

• 网络包预加载：

  在 webpack 4.6.0+ 中，您可以预加载模块。 HTML 链接标记中的preload提示 (<link rel="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

Answer 2

一种替代方法是使用 webfontloader。它是由谷歌和Typekit共同开发的。

npm i webfontloader

在您的应用程序.js文件中添加此文件。注意：您仍然必须在css文件中维护字体声明。

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

Answer 3

我也在索引.css文件上使用字体

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

<link rel="stylesheet" href="../src/index.css" />

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

Answer 4

将document.fonts.load与useEffect一起使用

import React, { useEffect, useState } from 'react';
const MyComponent = () => {
const [loading, setLoading] = useState(true);

useEffect( ()=> {
document.fonts.load("12px Font-Name").then( () => { setLoading(false) } );
}, [])
return (
<React.Fragment>
{ loading 
? <div> Loading... </div>
: <main> Rest of Elements </main>
}
</React.Fragment>
);
};
export default MyComponent;