当前位置：首页 > React

react如何使用其他字体

2026-01-24 20:18:52React

使用自定义字体

在React项目中使用自定义字体可以通过CSS的@font-face规则实现。将字体文件（如.woff、.ttf等格式）放入项目的public或src目录，通过CSS引入并定义字体族名称。

/* 在CSS文件中定义 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2'),
       url('/fonts/CustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'CustomFont', sans-serif;
}

通过Google Fonts引入

使用Google Fonts等在线字体服务，可以直接在HTML的<head>中添加链接，或在React组件的index.html中引入。在CSS中直接调用字体名称即可。

react如何使用其他字体

<!-- 在public/index.html中添加 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

/* 在组件CSS中使用 */
.text {
  font-family: 'Roboto', sans-serif;
}

使用npm包管理字体

部分字体（如font-awesome或typeface系列）可通过npm安装。安装后，在项目的入口文件（如index.js）中导入字体样式。

npm install typeface-roboto

// 在入口文件中导入
import 'typeface-roboto';

动态加载字体

通过JavaScript动态加载字体，可以使用FontFace API。适用于需要按需加载字体的场景。

react如何使用其他字体

const font = new FontFace('CustomFont', 'url(/fonts/CustomFont.woff2)');
font.load().then(() => {
  document.fonts.add(font);
  document.body.style.fontFamily = 'CustomFont';
});

优化字体性能

为减少字体加载时的布局偏移（FOIT/FOUT），可使用font-display: swap属性。这会优先显示备用字体，待自定义字体加载完成后再替换。

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff2') format('woff2');
  font-display: swap;
}

字体文件路径处理

在Create React App等项目中，字体文件建议放在public/fonts目录，并通过绝对路径引用。若使用Webpack，需配置file-loader或url-loader处理字体文件。

// Webpack配置示例
module: {
  rules: [
    {
      test: /\.(woff|woff2|ttf)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[ext]',
        },
      },
    },
  ],
}