如何使用 Styled Components 4 将 Web 字体导入 React 应用

厌倦了只能通过 CDN 请求字体吗？别再犹豫了。

厌倦了只能通过 CDN 请求字体吗？别再犹豫了。

您可能出于多种原因需要导入字体——从购买某些字体的企业许可证，到可用性问题，甚至是因为您喜欢的字体无法通过 CDN（内容分发网络）获得。

自从我开始从事开发工作以来，我学会了如何直接导入网页字体，而不是链接到字体托管的 CDN。由于我一开始并不知道该从何入手，所以我决定写这篇简短的教程，向大家展示如何在 React 环境中使用 styled-components 4 来实现这一点——这是我最喜欢的 React 应用 CSS 编写方式。

让我们进入正题。

首先，您需要选择要导入的字体，并以 woff 或 woff2 格式下载。Woff（以及后来的 Woff2）代表 Web Open Font Format（网络开放字体格式），是万维网联盟 (W3C) 推荐的字体格式。其格式特定的压缩技术确保了字体在所有浏览器中的良好性能，并且与从 CDN 请求字体相比，还能降低网页字体的延迟。

例如，您可以从以下几个网站下载这些文件：

• https://www.onlinewebfonts.com

随便选你喜欢的！
我建议你至少导入 woff 和 woff2 这两种字体格式，因为它们是 W3C 推荐的，并且被所有浏览器广泛支持。

在你的 React 项目中，在 src 文件夹下创建一个名为“fonts”的文件夹。在这个文件夹下创建一个名为 fonts.js 的文件——该文件将包含字体导入语句，并稍后使这些字体可供应用程序的其他部分使用。

现在，将您刚刚下载的两个字体文件放入同一个文件夹中。这样，您的应用程序就可以正确导入它们。完成此操作后，您的文件结构应该类似于这样：

src
|__fonts
    |__fonts.js
    |__nameOfYourFont.woff2
    |__nameOfYourFont.woff

现在，让我们实际在 fonts.js 文件中编写一些代码，以便“styled components”可以将它们作为全局字体导入。

在你的 fonts.js 文件中，从 'styled-components' 导入 { createGlobalStyle }。这是一个方便的小工具，用于处理应用程序中的全局 CSS 样式。如果你想深入了解，可以访问styled-components 文档中的 createGlobalStyle 部分。完成上述步骤后，你需要将字体导入到你的文件中，并在 font-face 声明中声明它们。

import { createGlobalStyle } from 'styled-components';

import NameOfYourFontWoff from './nameOfYourFont.woff';
import NameOfYourFontWoff2 from './nameOfYourFont.woff2';

export default createGlobalStyle`
    @font-face {
        font-family: 'Font Name';
        src: local('Font Name'), local('FontName'),
        url(${NameOfYourFontWoff2}) format('woff2'),
        url(${NameOfYourFontWoff}) format('woff');
        font-weight: 300;
        font-style: normal;
    }
`;

这将以 woff 和 woff2 格式导入您选择的字体，并通过字体文件使其可访问。

但这仅仅是战斗的一半。

虽然我们已经导入了这些特定的字体，但我们还没有真正将它们导入到我们的应用程序中。

在 App.js 文件的顶部，导入 React 之后，写入

import GlobalFonts from './fonts/fonts';

// assuming you places fonts in your src folder as described above.

在 App.js 文件中的某个位置，最好是在包含网站布局或类似内容且不需要任何字体样式的普通样式组件的下方，将 GlobalFonts 组件放在 render 函数的返回值中：

render() {
    return (
        <Wrapper> 
            <GlobalFonts />
    // ...
        </Wrapper>
    );
}

完成上述步骤后，您就可以在样式中的任何位置随意使用字体了。在任何 styled-components 文件中，只需声明（例如）：

const AwesomeHeadline = styled.h1`
    font-family: 'Font Name';
`;

export default AwesomeHeadline;

瞧，您刚刚导入了网页字体并将其用于标题！

我希望这能帮助你将来导入字体，无论是用于工作还是用于你那些充满个人特色的精彩个人项目！