自定义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;
}

- Chris Lau

Answer 1

网页字体加载延迟是一种预期的行为问题，这是因为浏览器会在检测到与font-face规则匹配的CSS选择器的DOM元素时才加载字体，而这发生在HTML文件和所有CSS文件已经下载到客户端时。这是一种惰性加载机制。有一些解决方案可以改善这种行为：

- 使用优化的网页字体文件： 为了获得更好的性能，您可以使用woff和woff2文件格式替换font-face中的TTF字体文件。这些格式经过gzip压缩，从而减小了文件大小和客户端的初始下载时间。如果没有这些格式，您可以使用许多在线工具将字体文件转换为它们（google TTF to woff2）。

---

• Webpack 预加载：

  在 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。

- Ali Mousavi

Answer 2

一个选择是使用webfontloader。它是由Google和Typekit共同开发的。

npm i webfontloader

在你的App.js文件中添加以下内容。注意：你仍然需要在你的CSS文件中维护你的字体声明。

import WebFont from 'webfontloader';

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

- Dominic J. Lucenario

Answer 3

使用 useEffect 和 document.fonts.load。

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;

- GMKHussain

Answer 4

我也在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;
}

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

然后我把index.css文件导入到index.html中，这对我起了作用。

- Dragos UniqQum